Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте следующую статью ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
- <table> — контейнер, внутри которого располагается таблица (такой же, как <ul> для маркированных или <ol> для нумерованных списков).
- border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
- <caption> задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега <table> , вне ячеек и строк.
- <tr> — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
- <th> — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри <th> обозреватель выделяет жирным и размещает по центру.
- <td> — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег <tr> , столько ячеек в ней и будет: один тег — одна ячейка.
- <colgroup> позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега <caption> , если его нет, то после <table> .
- <col> используется для той же цели, что и <colgroup> . <colgroup> может содержать <col> , но не наоборот.
- span — атрибут, задающий число столбцов, к которым применяются свойства контейнера <col> .
- <thead> , <tbody> и <tfoot> — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров <head> , <body> и <footer> в HTML-документе.
- colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
- rowspan объединяет ячейки по столбцам.
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Пример таблицы</title>
</head>
<body>
<table border="1">
<caption>Инструменты создания сайтов</caption>
<tr>
<th>Назначение</th><th colspan="2">Инструмент</th>
</tr>
<tr>
<td>Разметка</td><td>HTML</td><td>XHTML</td>
</tr>
<tr>
<td>Оформление</td><td colspan="2">CSS</td>
</tr>
<tr>
<td>Разработка</td><td>PHP</td><td>Python</td>
</tr>
</table>
</body>
</html>
В браузере документ будет выглядеть так:
Разберём, какие строчки кода за что отвечают.
- <table border="1"> — открыли таблицу, задав ей толщину рамок.
- <caption> Инструменты создания сайтов </caption> — озаглавили её.
- <tr> — открыли строку.
- <th> Назначение</th> — создали ячейку с оформлением заголовка.
- <th colspan="2"> Инструмент</th> — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
- </tr> — закрыли строку. Аналогично создали остальные строки.
- <tr> <td> Разметка</td><td> HTML</td><td> XHTML</td> </tr> — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
- </table> — закрыли таблицу.
