Таблицы в HTML

Таблицы в HTML предназначены только для табличных данных, а это любой тип содержимого, который может быть семантически расположен в строках и столбцах.

Это похоже на электронную таблицу в Excel.

Синтаксис

Построение таблицы в HTML требует определённой структуры:

• открыть <table>;
• добавить строки через <tr>;
• добавить обычные ячейки через <td> или заглавные ячейки через <th>.

Эта иерархия обязательна и все три элемента необходимы для построения таблицы.

При написании кода вам нужно определить ячейки своей таблицы слева направо и так до низу.

<table>
  <tr>
    <td>Джон Леннон</td>
    <td>Ритм-гитара</td>
  </tr>
  <tr>
    <td>Пол Маккартни</td>
    <td>Бас</td>
  </tr>
  <tr>
    <td>Джордж Харрисон</td>
    <td>Соло-гитара</td>
  </tr>
  <tr>
    <td>Ринго Старр</td>
    <td>Барабаны</td>
  </tr>
</table>

Как вы можете видеть, таблица в HTML является довольно многословной: много тегов для всего нескольких строк данных.

<thead>, <tfoot> и <tbody>

Так же, как веб-страница может содержать «шапку» и «подвал», таблица может содержать головную, основную и нижнюю части. Как и всё в HTML, это чисто по семантическим причинам: предоставление большей структуры вашей таблице.

<thead>, <tfoot> и <tbody> представляют собой наборы строк. Как таковые, они являются прямыми детьми <table> и прямыми родителями одного или более <tr>. Короче говоря, они добавляют один уровень иерархии.

<thead> и <tfoot> используются в качестве резюме столбцов.

Давайте улучшим предыдущую таблицу с <thead> и <tbody>:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Инструмент</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Джон Леннон</td>
      <td>Ритм-гитара</td>
    </tr>
    <tr>
      <td>Пол Маккартни</td>
      <td>Бас</td>
    </tr>
    <tr>
      <td>Джордж Харрисон</td>
      <td>Соло-гитара</td>
    </tr>
    <tr>
      <td>Ринго Старр</td>
      <td>Барабаны</td>
    </tr>
  </tbody>
</table>

<tfoot> отдельно

Давайте также добавим <tfoot> к таблице:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Инструмент</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Имя</th>
      <th>Инструмент</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Джон Леннон</td>
      <td>Ритм-гитара</td>
    </tr>
    <tr>
      <td>Пол Маккартни</td>
      <td>Бас</td>
    </tr>
    <tr>
      <td>Джордж Харрисон</td>
      <td>Соло-гитара</td>
    </tr>
    <tr>
      <td>Ринго Старр</td>
      <td>Барабаны</td>
    </tr>
  </tbody>
</table>

Несмотря на то, что мы перед <tbody> добавили <tfoot>, он, тем не менее, появляется в конце.

Это исходит из того, что <tbody> может содержать много строк. Но браузер хочет отобразить нижнюю часть до получения всех (потенциально многочисленных) строк данных. Вот почему <tfoot> идёт сперва в коде.

colspan и rowspan

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

<table>
  <tr>
    <th colspan="2">Синглы Майкла Джексона</th>
  </tr>
  <tr>
    <th rowspan="3">1979</th>
    <td>Don't Stop 'Til You Get Enough</td>
  </tr>
  <tr>
    <td>Rock with You</td>
  </tr>
  <tr>
    <td>Off the Wall</td>
  </tr>
</table>

Ячейка «Синглы Майкла Джексона» охватывает два столбца, так что следующая строка включает в себя две ячейки.

Так как ячейка «1979» охватывает три строки, две следующие строки включают в себя только одну ячейку, чтобы добавить пространство для столбца «1979».

Перейти к заданиям