Помогите написать такую таблицу html css

Question

никак не могу написать данную сложную таблицу, помогитен пожалуйста

Answer 1

Для покраски фона вешаешь на ячейки классы.
Можно и без классов, но тогда считать ячейки надо с конца.
Для жёлтой колонки, где нет деления на строки ставишь colspan=2.
Для левой части жёлтой колонки, где есть деление на строки - rowspan=3.
И не забудь на таблицу повесить border-collapse: collapse.

Answer 2

Предлагаю раз и навсегда закрепить тут ответ, потому что попадается такой вопрос уже несколько раз на разных площадках. В head указал классы по названию столбцов. В них можно настраивать цвета

.table {
  font-family: 'Arial', 'Verdana', sans-serif;
  border-collapse: collapse; /* Убираем двойные линии между ячейками */
}

.header {
  text-transform: uppercase;
  font-weight: 700;
}

td,
th {
  padding: 3px; /* Поля вокруг содержимого таблицы */
  border: 1px solid black; /* Параметры рамки */
  text-align: center;
}

.aspect {
  background: rgb(254, 254, 157);
}

.simple {
  background: lightblue;
}

.progressive {
  background: rgb(255, 166, 166);
}

.perfect {
  background: rgb(150, 242, 150);
}

.perfect-progressive {
  background: rgb(255, 162, 255);
}

.italic {
  font-style: italic;
}

.boldtext {
  font-weight: bold;
}

<table class="table">
  <tbody>
    <tr class="header">
      <td class="aspect" colspan="2">Aspect</td>
      <td class="simple">Simple</td>
      <td class="progressive">Progressive</td>
      <td class="perfect">Perfect</td>
      <td class="perfect-progressive">Perfect Progressive</td>
    </tr>
    <tr>
      <td class="aspect header" colspan="2" rowspan="2">Meaning</td>
      <td class="simple">a common aspect</td>
      <td class="progressive">a process</td>
      <td class="perfect">priority</td>
      <td class="perfect-progressive">priority + process</td>
    </tr>
    <tr>
      <td class="simple boldtext">When?</td>
      <td class="progressive boldtext">At what time?</td>
      <td class="perfect boldtext">By what time?</td>
      <td class="perfect-progressive boldtext">Since what time? How long?</td>
    </tr>
    <tr class="italic">
      <td class="aspect" colspan="2">Period of time</td>
      <td class="simple">usually, often, always, seldom, every day (week, month, year)</td>
      <td class="progressive">now, at the moment</td>
      <td class="perfect">ever, never, just, already, not...yet, by 3 p.m.</td>
      <td class="perfect-progressive">since 3 p.m., for a long time, for a month</td>
    </tr>
    <tr>
      <td class="aspect" rowspan="3">Present</td>
      <td class="aspect boldtext">+</td>
      <td class="simple"><b>V</b>/<b>V</b>s</td>
      <td class="progressive">am/is/are + <b>V</b>ing</td>
      <td class="perfect">have/has + <b>V</b>ed/<b>V</b><sub>3</sub></td>
      <td class="perfect-progressive">have/has + been + <b>V</b>ing</td>
    </tr>
    <tr>
      <td class="aspect boldtext">?</td>
      <td class="simple">do/does + <b>V</b></td>
      <td class="progressive">inversion</td>
      <td class="perfect">inversion</td>
      <td class="perfect-progressive">inversion</td>
    </tr>
    <tr>
      <td class="aspect boldtext">-</td>
      <td class="simple">do/does + not + <b>V</b></td>
      <td class="progressive">am/is/are + not + <b>V</b>ing</td>
      <td class="perfect">have/has + not + <b>V</b>ed/<b>V</b><sub>3</sub></td>
      <td class="perfect-progressive">have/has + not + been + <b>V</b>ing</td>
    </tr>
    <tr class="italic">
      <td class="aspect" colspan="2">Period of time</td>
      <td class="simple">yesterday, last week (month, year), long ago</td>
      <td class="progressive">yesterday at 3 p.m., yesterday from 6 till 7, when you came</td>
      <td class="perfect">yesterday by 3 p.m., before some time in the past</td>
      <td class="perfect-progressive">yesterday since 3 p.m., for some time in the past</td>
    </tr>
    <tr>
      <td class="aspect" rowspan="3">Past</td>
      <td class="aspect boldtext">+</td>
      <td class="simple"><b>V</b>ed/<b>V</b><sub>2</sub></td>
      <td class="progressive">was/were + <b>V</b>ing</td>
      <td class="perfect">had + Ved/V3</td>
      <td class="perfect-progressive">had + been + <b>V</b>ing</td>
    </tr>
    <tr>
      <td class="aspect boldtext">?</td>
      <td class="simple">did + <b>V</b></td>
      <td class="progressive">inversion</td>
      <td class="perfect">inversion</td>
      <td class="perfect-progressive">inversion</td>
    </tr>
    <tr>
      <td class="aspect boldtext">-</td>
      <td class="simple">did + not + <b>V</b></td>
      <td class="progressive">was/were + not + <b>V</b>ing</td>
      <td class="perfect">had + not + Ved/V<sub>3</sub></td>
      <td class="perfect-progressive">had + not + been + <b>V</b>ing</td>
    </tr>
    <tr class="italic">
      <td class="aspect" colspan="2">Period of time</td>
      <td class="simple">tomorrow, next week (month, year)</td>
      <td class="progressive">tomorrow at 3 p.m., tomorrow from 6 till 7, when you come</td>
      <td class="perfect">tomorrow by 3 p.m., before some time in the future</td>
      <td class="perfect-progressive">tomorrow since 3 p.m., for some time in the future</td>
    </tr>
    <tr>
      <td class="aspect" rowspan="3">Future</td>
      <td class="aspect boldtext">+</td>
      <td class="simple">will + <b>V</b></td>
      <td class="progressive">will + be + <b>V</b>ing</td>
      <td class="perfect">will + have + <b>V</b>ed/<b>V</b><sub>3</sub></td>
      <td class="perfect-progressive">will + have + been + <b>V</b>ing</td>
    </tr>
    <tr>
      <td class="aspect boldtext">?</td>
      <td class="simple">inversion</td>
      <td class="progressive">inversion</td>
      <td class="perfect">inversion</td>
      <td class="perfect-progressive">inversion</td>
    </tr>
    <tr>
      <td class="aspect boldtext">-</td>
      <td class="simple">won't + <b>V</b></td>
      <td class="progressive">won't + be + <b>V</b>ing</td>
      <td class="perfect">won't + have + <b>V</b>ed/<b>V</b><sub>3</sub></td>
      <td class="perfect-progressive">won't + have + been + <b>V</b>ing</td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Помогите написать такую таблицу html css

Ответы (2 шт):