Теги, связанные с таблицами

В этой статье мы объясняем теги, связанные с таблицами.

Здесь объясняется, как описывать таблицы и заголовки к ним в HTML с примерами.

YouTube Video

Теги, связанные с таблицами

Тег <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• Тег <table> используется для создания таблицы, которая организует и отображает данные в виде строк и столбцов.

  Тег <table> визуально организует данные и создаёт таблицы с несколькими строками и столбцами. Строки определяются с помощью тега <tr>, ячейки заголовков — через <th>, а ячейки данных — через <td>.

• Вы можете настроить стиль и раскладку таблицы с помощью CSS.

Тег <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• Тег <tr> используется для определения строк в таблице.

  Тег <tr> используется для создания каждой строки таблицы с ячейками (<td> или <th>).

• Каждая строка может содержать несколько ячеек, формируя общую структуру таблицы.

Теги <th> и <td>

1<th>Header 1</th>
2<td>Data 1</td>

• Тег <th> определяет ячейку заголовка таблицы. Обычно используется в строках заголовков, содержимое ячеек выделено жирным шрифтом и выровнено по центру.
• Тег <td> определяет стандартную ячейку данных таблицы, в которой отображаются обычные данные таблицы.

Атрибуты colspan и rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan и rowspan — это атрибуты, которые используются, когда ячейки таблицы охватывают несколько столбцов или строк.

• Атрибут colspan позволяет ячейке занимать несколько столбцов.
• Атрибут rowspan позволяет ячейке охватывать несколько строк.

Теги <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• Тег <thead> используется для определения раздела заголовков таблицы. Обычно он содержит заголовки столбцов.

  Тег <thead> располагается в верхней части таблицы и определяет заголовки столбцов. Это помогает четко разделить разделы данных.

• Тег <tbody> определяет основной раздел таблицы. Он содержит строки данных.

  Тег <tbody> содержит основное содержимое данных таблицы. Он располагается между строками, заключенными в теги <thead> и <tfoot>.

• Тег <tfoot> определяет нижнюю часть таблицы, содержащую итоги или примечания.

  Тег <tfoot> находится в конце таблицы и используется для отображения итогов или других аннотаций. Он особенно полезен для итогов или суммирования больших наборов данных.

Теги <caption> и <colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• Тег <caption> добавляет заголовок, чтобы сделать содержание таблицы более понятным. Обычно он размещается наверху таблицы и служит для краткого изложения общего содержания таблицы.

• Тег <colgroup> группирует столбцы в таблице и используется для применения стилей или макетов. Вы можете задать цвета фона или ширину для определенных столбцов, используя тег <col>.

Пример таблицы

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• Тег <table> используется для создания таблицы, которая отображает данные в строках и столбцах.

• Тег <thead> группирует строки-заголовки таблицы. Обычно он содержит теги <th>, которые служат заголовками.

• Тег <tbody> группирует основное содержимое таблицы. Обычно он включает строки данных, состоящие из тегов <td>.

• Тег <tfoot> группирует строки нижнего колонтитула таблицы. Он подходит для отображения итогов или заметок.

• Тег <colgroup> группирует столбцы таблицы и используется для применения стилей к ним в целом.

• Тег <caption> добавляет подпись или заголовок к таблице, облегчая пользователю понимание содержимого таблицы.

• Атрибут colspan позволяет ячейке занимать несколько столбцов.

• Атрибут rowspan позволяет ячейке охватывать несколько строк.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video