# Таблицы HTML

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

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

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

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

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

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

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

* расписание занятий в спортклубах/школах и пр;
* информация о комплектации/характеристиках автомобиля;
* курсы валют;
* сравнение товаров.

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

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

* **`<table>`** - тег-контейнер, внутри которого находятся все остальные элементы таблицы
* **`<tr>`** - тег, определяющий строку таблицы
* **`<td>`** - тег, определяющий столбец таблицы (ее ячейка)

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

```html
<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>
```

Результат:

![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/table-first.png)

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

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

    ```css
    td {
      border: 1px solid red;
    }
    ```

    Результат: ![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/border-first.png)

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

    ```css
    table {
      border-collapse: collapse;
    }
    ```

    Результат:

    ![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/border-collapse.png)
2.  **Заголовок** - обычно у каждой ячейки таблицы есть свой заголовок. За его создание в html-таблице отвечает тег **`<th>`**

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

    ```html
    <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>
    ```

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

    ```css
    th {
      border: 1px solid red;
    }
    ```

    Результат:

    ![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/table-th1.png)

    > _**Примечание**_
    >
    > По умолчанию для заголовков таблицы используется жирный шрифт, и текст выровнен по центру
3.  **Объединение строк таблицы** - атрибут `coslspan` задает количество ячеек, объедененных по горизонтали.

    ```html
    <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>
    ```

    Результат:

    ![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/table-colspan1.png)

    Чуть больше потренироваться с данным свойством можно [здесь](https://jsfiddle.net/ttymchuk/d1wh5c4t/78/).
4.  **Объединение столбцов таблицы** - атрибут `rowspan` задает количество ячеек, объедененных по вертикали.

    ```html
    <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>
    ```

    Результат:

    ![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/table-rowspan1.png)

    Чуть больше потренироваться с данным свойством можно [здесь](https://jsfiddle.net/ttymchuk/d1wh5c4t/80/)

    > _**Примечание**_
    >
    > Атрибуты "colspan" и "rowspan" задаются для тега "td"
5.  **Заголовок таблицы** - тег `<caption>` задает подпись таблице.

    ![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/table-caption1.png)

    > _**Примечание**_
    >
    > Это должен быть первый тег после тега "table"
6.  **Группирование строк и столбцов таблицы**:

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

    ```html
    <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>
    ```

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

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

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

    Результат:

    ![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/table-styles.png)

    Потренироваться с данным свойством можно [здесь](https://jsfiddle.net/ttymchuk/d1wh5c4t/83/)
7. **Группировка разделов таблицы** по аналогии с обычным HTML документом таблица имеет логическую структуру (колонтитулы):
   * **`<thead>`** - верхняя часть таблицы. Располагается после `<caption>`, `<colgroup>`, `<col>`
   * **`<tbody>`** - основная часть таблицы. Располагается после `<caption>`, `<colgroup>`, `<col>`, `<thead>`, `<tfoot>`
   * **`<tfoot>`** - нижняя часть таблицы. Располагается после `<caption>`, `<colgroup>`, `<col>`, `<thead>` и **перед** `<tbody>`

```html
    <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>
```

Результат:

![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/table-structure.png)

Потренироваться можно [здесь](https://jsfiddle.net/ttymchuk/d1wh5c4t/91/)

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

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

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

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

![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/table-width.png)

Потренироваться можно [здесь](https://jsfiddle.net/ttymchuk/d1wh5c4t/93/).

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

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

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

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

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

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

```html
<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>
```

Стили

```css
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;
}
```

Результат:

![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/layout-auto.png)

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

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

Результат:

![](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson10_tables_html5_css3/img/layout-fixed.png)

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

Попрактиковаться можно [здесь](https://jsfiddle.net/ttymchuk/d1wh5c4t/108/).
