Таблицы состоят из строк и столбцов, на пересечении которых образуются ячейки. Ячейки могут содержать любой HTML-контент: текст, изображения, элементы форм или вложенные таблицы. HTML-таблицы служат для упорядоченного отображения информации. Хотя ранее таблицы использовались для верстки страниц, сейчас для этого чаще применяют CSS, но таблицы остаются необходимыми для представления структурированных данных.
Создание таблиц
Таблица создается с помощью тега <table>, внутри которого размещаются строки, столбцы и ячейки.
Пример простой таблицы 3×3:
<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>
Для заголовков столбцов используется тег <th> (table header). Текст внутри <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>
Атрибуты таблиц
Для добавления границ используется атрибут border тега <table>. Значение атрибута задает толщину границы в пикселях (например, border="1"). Атрибут border также отображает границы между ячейками.
<table border="1">
<!-- ...содержимое таблицы... -->
</table>
Другие полезные атрибуты: align (выравнивание), bgcolor (фоновый цвет), cellpadding (расстояние между содержимым и границей ячейки), cellspacing (расстояние между ячейками), width (ширина), height (высота).
Заголовок таблицы
Заголовок добавляется с помощью тега <caption> внутри <table>. Заголовок по умолчанию выравнивается по центру.
<table>
<caption>Заголовок таблицы</caption>
<!-- ...содержимое таблицы... -->
</table>
Объединение ячеек и выравнивание
Атрибут colspan объединяет ячейки по горизонтали, rowspan – по вертикали. Важно удалить лишние ячейки после применения colspan или rowspan.
Атрибут align внутри <td> или <th> выравнивает содержимое по горизонтали (align="center", align="left", align="right"). valign выравнивает по вертикали (valign="top", valign="middle", valign="bottom"). bgcolor задает фоновый цвет ячейки, а bordercolor — цвет границы.
Разделение таблицы на логические части
Теги <thead>, <tbody> и <tfoot> позволяют разделить таблицу на заголовок, тело и подвал. Это удобно для стилизации и структурирования больших таблиц.
В этом уроке мы рассмотрели создание и форматирование таблиц в HTML. Изучение атрибутов и тегов позволяет создавать удобные и информативные таблицы для веб-страниц.