Как создать таблицу в html документе
Тег <TABLE>
позволяет вставить таблицу в документ. Используя таблицу можно делать
стыковку изображений и вставлять их именно в ту часть страницы, в которую
вы задумал это сделать. Знание таблиц очень пригодится для визуального
оформления сайта. Вот код престейшей таблицы:
|
<TABLE bgcolor="ff0000" width="300"> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD></TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE> |
Так она выглядит в браузере.
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
где тэг <TR> определяет строку в таблице, а
тег <TD> определяет каждую ячейку в таблице.
В верхней строке две ячейки 1, 2 и внижней 3, 4. Тэг <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 - между всеми рядами и колонками. |
| Атрибуты для строк и ячейек. | ||
| 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="3"> означает, что ячейка будет растянута на 3 колонки. | |
| rowspan="n" | Растягивание ячейки по строке. Например, <TD ROWSPAN="3" означает, что ячейка будет растянута на две строки таблицы. | |
| nowrap | Присутствие этого аттрибута показывает, что текст должен размещаться в одну строку | |
| background="image.gif" | Заполняет фон ячейки изображением. | |
***
Тег <CAPTION> позволяет задать
заголовок таблице. Должен вставляться сразу же после открывающего тега <TABLE>
>. Таблица может иметь только один заголовок.
***
Элемент <COL> используется,
когда нужно сгруппировать атрибуты для группы колонок в таблице. Заметьте, что этот тег не
создаёт колонки, так как это делает <COLGROUP>.
Закрывающий тег не нужен!
***
Тег <COLGROUP> позволяет создать
группу колонок в таблице.
***
Тег <TBODY> определяет тело таблицы,
когда используются элементы <THEAD> и <TFOOT>. Таблица может содержать несколько тегов
<TBODY>.
***
Элемент <THEAD> определяет табличный заголовок.
Формируется из одной или нескольких строк в отличие от тега <TH>, который отображается
на уровне ячейки. Тег <THEAD> не является основным элементом, и предполагается, что он
должен содержать информацию о полях таблицы.
***
Тег <TFOOT> определяет нижнюю часть таблицы. Он состоит из одной или более колонок внизу. Этот элемент - дополнительный, подразумевается, что он должен содержать сведенья о полях таблицы.