📗Таблицы HTML

Что это такое?

Таблица в общем понимании - это способ структурирования данных путем их распределения по строкам и столбцам.

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

Единственное отличие - для их создания, редактирования и визуализации используются не привычные Excel, Word, Numbers и т.п., а HTML и CSS.

Примечание

Когда-то давно таблицы использовались для верстки веб-страниц. Было даже название "табличная верстка". Однако, такой подход не обеспечивал адаптивность сайта и гибкость его структуры, попутно увеличивая HTML-разметку. В современном мире делать разметку сайта с помощью таблиц нельзя!

Где используются?

Примеры использования таблиц на сайтах:

• расписание занятий в спортклубах/школах и пр;

• информация о комплектации/характеристиках автомобиля;

• курсы валют;

• сравнение товаров.

Как использовать?

Существует три основных тега, которые нужно помнить при работе с таблицами:

• <table> - тег-контейнер, внутри которого находятся все остальные элементы таблицы

• <tr> - тег, определяющий строку таблицы

• <td> - тег, определяющий столбец таблицы (ее ячейка)

Рассмотрим простой пример.

<table>
  <tr>
    <td>Запись 1</td>
    <td>Запись 2</td>
    <td>Запись 3</td>
  </tr>
  <tr>
    <td>Запись 4</td>
    <td>Запись 5</td>
    <td>Запись 6</td>
  </tr>
  <tr>
    <td>Запись 7</td>
    <td>Запись 8</td>
    <td>Запись 9</td>
  </tr>
</table>

Результат:

Как задать свои стили для таблицы?

1. Границы - таблица без границ используется крайне редко. Давайте нарисуем границу для каждой из колонок. Делается это при помощи CSS свойства border.

   td {
     border: 1px solid red;
   }

   Результат:

   Что же вышло не так? Задав border для каждой из ячеек, мы получили промежутки между ними. Чтобы избавиться от него нужно добавить для тега <table> свойство border-collapse, которое позволяет убрать промежутки между ячейками:

   table {
     border-collapse: collapse;
   }

   Результат:

   
2. Заголовок - обычно у каждой ячейки таблицы есть свой заголовок. За его создание в html-таблице отвечает тег <th>

   Давайте добавим его в нашу табличку:

   <table>
     <tr>
       <th>Заголовок 1</th>
       <th>Заголовок 2</th>
       <th>Заголовок 3</th>
     </tr>
     <tr>
       <td>Запись 1</td>
       <td>Запись 2</td>
       <td>Запись 3</td>
     </tr>
     <tr>
       <td>Запись 4</td>
       <td>Запись 5</td>
       <td>Запись 6</td>
     </tr>
     <tr>
       <td>Запись 7</td>
       <td>Запись 8</td>
       <td>Запись 9</td>
     </tr>
   </table>

   и добавим для него границу:

   th {
     border: 1px solid red;
   }

   Результат:

   

   Примечание

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

3. Объединение строк таблицы - атрибут coslspan задает количество ячеек, объедененных по горизонтали.

   <table>
     <tr>
       <th>Заголовок 1</th>
       <th>Заголовок 2</th>
       <th>Заголовок 3</th>
     </tr>
     <tr>
       <td colspan="2">Запись 1</td>
       <td>Запись 3</td>
     </tr>
     <tr>
       <td>Запись 4</td>
       <td>Запись 5</td>
       <td>Запись 6</td>
     </tr>
     <tr>
       <td>Запись 7</td>
       <td>Запись 8</td>
       <td>Запись 9</td>
     </tr>
   </table>

   Результат:

   

   Чуть больше потренироваться с данным свойством можно здесь.

4. Объединение столбцов таблицы - атрибут rowspan задает количество ячеек, объедененных по вертикали.

   <table>
     <tr>
       <th>Заголовок 1</th>
       <th>Заголовок 2</th>
       <th>Заголовок 3</th>
     </tr>
     <tr>
       <td colspan="2">Запись 1</td>
       <td>Запись 3</td>
     </tr>
     <tr>
       <td rowspan="2">Запись 4</td>
       <td>Запись 5</td>
       <td>Запись 6</td>
     </tr>
     <tr>
       <td>Запись 8</td>
       <td>Запись 9</td>
     </tr>
   </table>

   Результат:

   

   Чуть больше потренироваться с данным свойством можно здесь

   Примечание

   Атрибуты "colspan" и "rowspan" задаются для тега "td"

5. Заголовок таблицы - тег <caption> задает подпись таблице.

   

   Примечание

   Это должен быть первый тег после тега "table"

6. Группирование строк и столбцов таблицы:

   • <colgroup> - тег-контейнер, создает структурную группу столбцов, выделяя логически однотипные ячейки. С его помощью можно применить стили к столбцам, вместо присваивания их каждому элементу. Добавляется сразу после <table> и <caption>.

   • <col> - вложенный в <colgroup> тег, задающий свойства для каждого из столбцов элемента <colgroup>. Атрибут span позволяет задать количество столбцов для объединения.

   <table>
     <caption>test table for PE</caption>
     <colgroup>
       <col span="2" class="own-items">
       <col class="another-items">
     </colgroup>
     <tr>
       <th>Заголовок 1</th>
       <th>Заголовок 2</th>
       <th>Заголовок 3</th>
     </tr>
     <tr>
       <td colspan="2">Запись 1</td>
       <td>Запись 3</td>
     </tr>
     <tr>
       <td rowspan="2">Запись 4</td>
       <td>Запись 5</td>
       <td>Запись 6</td>
     </tr>
     <tr>
       <td>Запись 8</td>
       <td>Запись 9</td>
     </tr>
   </table>

   Зададим свойства классам:

   .own-items {
     background-color: yellow;
   }
   
   .another-items {
     background-color: green;
   }

   Результат:

   

   Потренироваться с данным свойством можно здесь

7. Группировка разделов таблицы по аналогии с обычным HTML документом таблица имеет логическую структуру (колонтитулы):

   • <thead> - верхняя часть таблицы. Располагается после <caption>, <colgroup>, <col>

   • <tbody> - основная часть таблицы. Располагается после <caption>, <colgroup>, <col>, <thead>, <tfoot>

   • <tfoot> - нижняя часть таблицы. Располагается после <caption>, <colgroup>, <col>, <thead> и перед <tbody>

    <table>
          <caption>test table for PE</caption>
          <colgroup>
            <col span="2" class="own-items">
            <col class="another-items">
          </colgroup>
          <thead>
           <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
            <th>Заголовок 3</th>
           </tr>
          </thead>
          <tfoot>
           <tr>
            <td>Запись 7</td>
            <td>Запись 8</td>
            <td>Запись 9</td>
           </tr>
          </tfoot>
          <tbody>
           <tr>
            <td colspan="2">Запись 1</td>
            <td rowspan="2">Запись 3</td>
           </tr>
           <tr>
            <td>Запись 4</td>
            <td>Запись 5</td>
           </tr>
          </tbody>
          </table>

Результат:

Потренироваться можно здесь

Что может находиться внутри табличных ячеек?

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

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

.own-items {
  background-color: yellow;
  width: 300px;
}

Потренироваться можно здесь.

Задання ширина включает в себя следующие значения: padding-left, padding-right и не включает border-left, border-right.

Ширина таблицы и ячеек

Браузеру можно указать, как именно ему вычислять ширину ячеек таблицы. Для этого используется CSS свойство table-layout. Возможные значения:

• auto (значение по умолчанию) - браузер загружает всю таблицу, анализирует её для определения размеров ячеек, и только после этого отображает.

• fixed - ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины.

Примечание

При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

Рассмотрим пример:

<table>
  <caption>Test table for PE</caption>
  <colgroup>
    <col span="2" class="own-items">
    <col class="another-items">
  </colgroup>
  <thead>
   <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
    <th>Заголовок 3</th>
   </tr>
  </thead>
  <tfoot>
   <tr>
    <td>Запись</td>
    <td>Запись 866666666666666666666666666666666666</td>
    <td>Запись 9</td>
   </tr>
  </tfoot>
  <tbody>
   <tr>
    <td >Запись 1</td>
    <td >Запись 2</td>
    <td rowspan="2">Запись 3</td>
   </tr>
   <tr>
    <td>Запись 4</td>
    <td>Запись 5</td>
   </tr>
  </tbody>
</table>

Стили

table {
  width: 400px;
  border-collapse: collapse;
  border: 1px solid red;
  table-layout: auto;
}

th {
  border: 1px solid red;
}

td {
  border: 1px solid red;
}

.own-items {
  background-color: yellow;
}

.another-items {
  background-color: green;
}

Результат:

Вторая колонка приняла ширину содержимого своей последней ячейки.

Поменяем значение свойства table-layout: fixed

Результат:

Ширина второй колонки не зависит от содержимого, находящегося в ней.

Попрактиковаться можно здесь.