HTML первые шаги - урок 5 - Таблицы

04/12/2019, by Ivan

Одним из важных форм хранения информации являются таблицы. В таблицах хранят информацию Excel, Access и другие базы данных. Таблицы очень наглядно представляют данные, по этим данным удобно строить графики и диаграммы.
Давайте в этому уроке разберем как создавать таблицы в HTML. Для этогом мы будем использовать теги <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>.

Тег table

TABLE - это основной тег таблицы, в него вкладываются другие теги таблицы.

<table>
</table>

Все остальные теги мы будем писать внутри этого тега.

Тег tr

TR - тег строки, каждая строка оформляется в виде тега <tr></tr>, если мы хотим три строки в таблице, то и таких пар тегов должно быть три:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Тег td

TD - тег ячейки, каждая ячейка должна находиться в теге строки. Чтобы таблица отображалась корректно количество ячеек должна совпадать. Давайте сделаем таблицу с четырмя ячейками на строку:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Осталось теперь заполнить таблицу данными:

<table>
  <tr>
    <td>Номер</td>
    <td>Фамилия</td>
    <td>Имя</td>
    <td>Отчество</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Иванов</td>
    <td>Иван</td>
    <td>Иванович</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Петров</td>
    <td>Петр</td>
    <td>Петрович</td>
  </tr>
</table>

Теперь можно оформить таблицу логически, разделив ее на три раздела thead - заголовок, tbody - содержимое страницы, tfoot - подвал страницы.

Тег tbody

TBODY не обязателен, но его можно вставить чтобы показать что здесь находится основная информация таблицы.

<table>
  <tbody>
    <tr>
      <td>Номер</td>
      <td>Фамилия</td>
      <td>Имя</td>
      <td>Отчество</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Иванов</td>
      <td>Иван</td>
      <td>Иванович</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петров</td>
      <td>Петр</td>
      <td>Петрович</td>
    </tr>
  </tbody>
</table>

Тег thead

THEAD используется для создания заголовка таблицы, попробуйте первую строку взять в thead.

<table>
  <thead>
    <tr>
      <td>Номер</td>
      <td>Фамилия</td>
      <td>Имя</td>
      <td>Отчество</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Иванов</td>
      <td>Иван</td>
      <td>Иванович</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петров</td>
      <td>Петр</td>
      <td>Петрович</td>
    </tr>
  </tbody>
</table>

А теперь вместо ячеек td, мы используем ячейки th, чтобы показать что это названия столбцов:

<table>
  <thead>
    <tr>
      <th>Номер</th>
      <th>Фамилия</th>
      <th>Имя</th>
      <th>Отчество</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Иванов</td>
      <td>Иван</td>
      <td>Иванович</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петров</td>
      <td>Петр</td>
      <td>Петрович</td>
    </tr>
  </tbody>
</table>

И если у вас адекватный браузер, то названия столбцов должны быть выделены, хотя бы жирным шрифтом. И остался еще одни тег подвала таблицы tfoot.

Тег tfoot

TFOOT определяет подпись внизу таблицы.

<table>
  <thead>
    <tr>
      <th>Номер</th>
      <th>Фамилия</th>
      <th>Имя</th>
      <th>Отчество</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Иванов</td>
      <td>Иван</td>
      <td>Иванович</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петров</td>
      <td>Петр</td>
      <td>Петрович</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Создание таблицы 2012 год</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

Атрибут colspan

Одним из важных атрибутов тега td является colspan, он позволяет объеденить ячейки. Давайте посмотрим на наш футер. У нас 4 ячейки, но заполнена только одна, поэтому можно объеденить эти четыре ячейки. Давайте используем атрибут colspan.

<table>
  <thead>
    <tr>
      <th>Номер</th>
      <th>Фамилия</th>
      <th>Имя</th>
      <th>Отчество</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Иванов</td>
      <td>Иван</td>
      <td>Иванович</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петров</td>
      <td>Петр</td>
      <td>Петрович</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Создание таблицы 2012 год</td>
    </tr>
  </tfoot>
</table>

Теперь у нас одна большая ячейка которая шириной в 4 ячейки. Значением атрибута colspan является количество объединенных ячеек.

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience