Таблицы. |
Чтобы разобраться в устройстве таблицы, расмотрим простой пример:
Примечание: В данном примере создана таблица с фиксированой шириной (width="200" пикселей), но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменятся в зависимости от размера окна. | Такая таблица реализуется следующим кодом:
<table border="2" width="200" |
Таблица начинается открывающимся тегом <table> и завершается закрывающимся </table>.
Тег <table> может включать следующие аттрибуты:
width="n" | Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек. |
border="n" | Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки. |
borderColor="#FFFFFF" | Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатиричное значение цвета. |
bgColor="#FFFFFF" | Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатиричное число. |
background="image.gif" | Заполняет фон таблицы изображением. |
cellSpacing="n" | Определяет расстояние между рамками ячеек таблицы в пикселях. |
cellPadding="n" | Определяет расстояние в пикселях между рамкой ячейки и текстом. |
align=left | Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: left (слева), center (по центру страницы) и right (справа). |
frame="значение" | Управляет внешней окантовкой таблицы, может принимать следующие значения: void - окантовки нет (значение по умолчанию). above - только граница сверху. below - только граница снизу. hsides - границы сверху и снизу. vsides - только границы слева и справа. lhs - только левая граница. rhs - только правая граница. box - рисуются все четыре стороны. border - также все четыре стороны. |
rules="n" | Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n): none - нет линий (значение по умолчанию). groups - линии будут только между группами рядов. rows - только между рядами. cols - только между колонками. all - между всеми рядами и колонками. |
Таблица может включать заголовок, который распологается между тегами <caption></caption>. Он должен быть непосредственно после тега <title>. К заголовку возможно применение аттрибута align, определяющего его положение относительно таблицы:
top - значение по умолчанию, заголовок над таблицей по центру.
left - заголовок над таблицей слева.
right - заголовок над таблицей справа.
bottom - заголовок под таблицей по центру.
Теперь о строках и ячейках таблицы. Строки таблицы начинаются открывающимся тэгом <tr> и завершаются закрывающимся </tr>, а каждая ячейка таблицы начинается тегом <td> и завершается </td>. Данные теги могут иметь такие аттрибуты:
Следующие атрибуты могут применятся для строк и ячейек. | |
align=left | Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение left (выравнивание влево), center (выравнивание по центру) и right (вправо). |
Valign=center | Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: top (выравнивание по верхнему краю), center (выравнивание по центру - это значение принимается по умолчанию), bottom (по нижнему краю). |
bgColor="#FFFFFF" | Устанавливает цвет фона строки или ячейки. |
background="image.gif" | Заполняет фон строки или ячейки изображением. |
Следующие атрибуты могут применятся только для ячейек. | |
width="n" | Определяет ширину ячейки в n пикселях. |
height="n" | Определяет высоту ячейки в n пикселях. |
colspan="n" | Растягивание ячейки по горизонтали. Например, <td colspan="2"> означает, что ячейка будет растянута на 2 колонки. |
rowspan="n" | Растягивание ячейки по строке. Например, <td rowspan="2" означает, что ячейка будет растянута на 2 строки таблицы. |
nowrap | Присутствие этого аттрибута показывает, что текст должен размещаться в одну строку |
background="image.gif" | Заполняет фон ячейки изображением. |
Кроме этого, любая ячейка таблицы может быть определена не тегами <td></td>, а тегами <th></th> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.
Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет ( - обязательно должен набираться строчными буквами и закрыватся точкой с запятой).
И еще - имейте ввиду, что теги, устанавливающие шрифт (<b>, <i>, <font size="n", font color="#FFFFFF"), необходимо повторять для каждой ячейки.