Таблицы
Для чего нужны таблицы?
На этот вопрос есть очевидный ответ: таблицы нужны для представления информации в табличном виде. Есть, однако, и менее очевидные ответы.
До настоящего времени мы имели дело с документами, в которых существовал только один "поток" текста. На практике иногда очень хочется расположить текст в несколько колонок. Таблица может в этом помочь.
Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который вы хотите обратить внимание читателя.
Как устроена таблица
В устройстве таблицы легче всего разобраться на простом примере.
<html>
<head>
<title>Пример 10</title>
</head>
<body>
<h1>Простейшая таблица</h1>
<table border="1"> <!--Это начало таблицы-->
<caption><!--Это заголовок таблицы--> У таблицы может быть заголовок </caption>
<tr><!--Это начало первой строки-->
<td><!--Это начало первой ячейки--> Первая строка, первая колонка </td>
<td><!--Это начало второй ячейки--> Первая строка, вторая колонка </td>
</tr><!--Это конец первой строки-->
<tr><!--Это начало второй строки-->
<td><!--Это начало первой ячейки--> Вторая строка, первая колонка </td>
<td><!--Это начало второй ячейки--> Вторая строка, вторая колонка </td>
</tr><!--Это конец второй строки-->
</table><!--Это конец таблицы-->
</body>
</html>
Атрибуты таблицы
Таблица начинается с тега <table>
и заканчивается тегом </table>
. Тег <table>
может включать несколько атрибутов:
align
- Устанавливает расположение таблицы относительно полей документа. Допустимые значения:
align="left"
(выравнивание влево),align="center"
(выравнивание по центру),align="right"
(выравнивание вправо). width
- Ширина таблицы. Ее можно задать в пикселах (например,
width="400"
) или в процентах от ширины страницы (например,width="80%"
). border
- Устанавливает ширину рамки таблицы и ячеек в пикселах (например,
border="4"
). Если атрибут не установлен, таблица отображается без рамки. cellspacing
- Устанавливает расстояние между рамками ячеек таблицы в пикселах (например,
cellspacing="2"
). cellpadding
- Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например,
cellpadding="10"
).
Структура таблицы
Таблица может иметь заголовок (<caption> ... </caption>
), хотя заголовок не является обязательным. Тег <caption>
может включать атрибут align
. Допустимые значения: align="top"
(заголовок над таблицей) и align="bottom"
(заголовок под таблицей).
Строки таблицы
Каждая строка таблицы начинается с тега <tr>
и заканчивается тегом </tr>
. Тег <tr>
может включать следующие атрибуты:
align
- Устанавливает выравнивание текста в ячейках строки. Допустимые значения:
align="left"
(выравнивание влево),align="center"
(выравнивание по центру),align="right"
(выравнивание вправо). valign
- Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения:
valign="top"
(по верхнему краю),valign="middle"
(по центру),valign="bottom"
(по нижнему краю).
Ячейки таблицы
Каждая ячейка таблицы начинается с тега <td>
и заканчивается тегом </td>
. Тег <td>
может включать следующие атрибуты:
nowrap
- Запрещает перенос текста внутри ячейки.
colspan
- Устанавливает размах ячейки по горизонтали. Например,
colspan="3"
означает, что ячейка занимает три колонки. rowspan
- Устанавливает размах ячейки по вертикали. Например,
rowspan="2"
означает, что ячейка занимает две строки. align
- Устанавливает выравнивание текста в ячейке. Допустимые значения:
align="left"
(влево),align="center"
(по центру),align="right"
(вправо). valign
- Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения:
valign="top"
(по верхнему краю),valign="middle"
(по центру),valign="bottom"
(по нижнему краю). width
- Устанавливает ширину ячейки в пикселах (например,
width="200"
). height
- Устанавливает высоту ячейки в пикселах (например,
height="40"
).
Особенности таблиц
Если ячейка таблицы пуста, рамка вокруг неё не отображается. Чтобы рамка отображалась, можно использовать символ
(неразрывный пробел). Это сделает ячейку пустой, но рамка будет видимой.
Любая ячейка таблицы может содержать в себе другую таблицу, что позволяет создавать сложные структуры.