Откройте для себя основы работы с HTML-таблицами
В первые дни веб-таблицы были очень важной частью компоновки зданий.
Позже они были заменены CSS и его возможностями компоновки, и сегодня у нас есть мощные инструменты, такие как CSS Flexbox и CSS Grid для создания макетов. Таблицы теперь используются только, угадайте, для построения таблиц!
Вtable
тег
Вы определяете таблицу, используяtable
тег:
<table>
</table>
Внутри таблицы мы определим данные. Мы рассуждаем в терминах строк, что означает, что мы добавляем в таблицу строки (а не столбцы). Мы определим столбцы внутри строки.
Рядов
Строка добавляется с помощьюtr
тег, и это единственное, что мы можем добавить вtable
элемент:
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Это таблица с 3 строками.
Первый рядможетвзять на себя роль заголовка.
Заголовки столбцов
Заголовок таблицы содержит имя столбца, обычно выделенное жирным шрифтом.
Подумайте о документе Excel / Google Sheets. ВершинаA-B-C-D...
заголовок.
Мы определяем заголовок, используяth
тег:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr></tr>
<tr></tr>
</table>
Содержание таблицы
Содержание таблицы определяется с помощьюtd
теги, внутри другогоtr
элементы:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>
Вот как браузеры отображают это, если вы не добавляете никаких стилей CSS:
Добавление этого CSS:
th, td {
padding: 10px;
border: 1px solid #333;
}
делает таблицу более похожей на настоящую:
Составные столбцы и строки
Строка может занимать 2 или более столбцов, используя параметрcolspan
атрибут:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td colspan="2">Row 1 Columns 1-2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td colspan="3">Row 2 Columns 1-3</td>
</tr>
</table>
Или он может охватывать 2 или более строк, используяrowspan
атрибут:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 3</td>
</tr>
</table>
Заголовки строк
Раньше я объяснил, как можно создавать заголовки столбцов, используяth
тег внутри первогоtr
тег таблицы.
Вы можете добавитьth
тег как первый элемент внутриtr
это не первыйtr
таблицы, чтобы иметь заголовки строк:
<table>
<tr>
<th></th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<th>Row 1</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<th>Row 2</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</table>
Дополнительные теги для организации таблицы
Вы можете добавить еще 3 тега в таблицу, чтобы сделать ее более организованной.
Это лучше всего при использовании больших таблиц. А также правильно определить верхний и нижний колонтитулы.
Эти теги
thead
tbody
tfoot
Они заворачиваютtr
теги, чтобы четко определить различия разделов таблицы. Вот пример использования:
<table>
<thead>
<tr>
<th></th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row 1</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<th>Row 2</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Footer of Col 1</td>
<td>Footer of Col 2</td>
</tr>
</tfoot>
</table>
Заголовок таблицы
Стол должен иметьcaption
тег, описывающий его содержимое. Этот тег следует ставить сразу после открытияtable
тег:
<table>
<caption>Dogs age</caption>
<tr>
<th>Dog</th>
<th>Age</th>
</tr>
<tr>
<td>Roger</td>
<td>7</td>
</tr>
</table>
Скачать мою бесплатнуюСправочник по HTML
Дополнительные руководства по HTML:
- Введение в HTML
- HTML-тег iframe
- HTML-формы
- HTML-тег `video`
- HTML-тег `audio`
- HTML-теги для текста
- Таблицы HTML
- HTML-тег img
- HTML-тег `a`
- HTML-тег `picture`
- HTML-тег `figure`
- Теги контейнера HTML
- Доступность в Интернете
- Как создать комментарий в HTML
- Как изменить URL-адрес HTML-изображения в темном режиме
- Адаптивные изображения с использованием srcset
- Изменение фавикона в темном режиме