Таблицы

Для чего нужны таблицы?

На этот вопрос есть очевидный ответ: таблицы нужны для представления информации в табличном виде. Есть, однако, и менее очевидные ответы.

До настоящего времени мы имели дело с документами, в которых существовал только один "поток" текста. На практике иногда очень хочется расположить текст в несколько колонок. Таблица может в этом помочь.

Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который вы хотите обратить внимание читателя.

Как устроена таблица

В устройстве таблицы легче всего разобраться на простом примере.

<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").

Особенности таблиц

Если ячейка таблицы пуста, рамка вокруг неё не отображается. Чтобы рамка отображалась, можно использовать символ &nbsp; (неразрывный пробел). Это сделает ячейку пустой, но рамка будет видимой.

Любая ячейка таблицы может содержать в себе другую таблицу, что позволяет создавать сложные структуры.