Таблицы HTML4
Для создания таблиц используются следующие теги:
- <table>...</table>
- обрамление самой таблицы;
- <thead>...</thead>
- обрамление шапки таблицы
(в одной таблице допускается не более одного тега <thead>);
- <tbody>...</tbody>
- группирует строки таблицы в один табличный блок
(таких блоков в таблице может быть несколько);
- <caption>...</caption>
- обрамление заголовка таблицы (текст, размещенный между этими тегами, выравнивается по центру).
В исходном коде тег <caption> ставится сразу после тега <table>;
- <tfoot>...</tfoot>
- обрамление футера, т.е. нижней, завершающей части таблицы
(в одной таблице допускается не более одного тега <tfoot>).
В исходном коде тег <tfoot> ставится до тега <tbody>.
- <tr>...</tr>
- обрамление строки таблицы;
- <td>...</td>
- обрамление обычной ячейки таблицы;
- <th>...</th>
- обрамление особой ячейки таблицы (текст, размещенный между этими тегами, отображается жирным начертанием с выравниванием по центру);
- <colgroup>...</colgroup>
- группирование столбцов для более удобного форматирования.
В исходном коде тег <colgroup> ставится после открывающего тега <table> и после тега <caption> (если он присутствует),
перед тегами <thead>, <tbody>, <tfoot> и <tr>;
- <col>
- один или несколько столбцов в контейнере <colgroup>...</colgroup> (<col> – одиночный тег).
Далее представлены ранее использовавшиеся атрибуты формирования таблиц html.
Ознакомиться с современными методами форматирования таблиц в соответствии с современным стандартом HTML5 можно на странице
Таблицы HTML
Атрибуты тега <table>
имя атрибута | возможные значения | смысл | примечания |
align |
left, right |
Горизонтальное положение таблицы.
Задание этого атрибута фактически определяет плавающую таблицу, которую может обтекать текст.
При использовании этого атрибута по окончании таблицы должен следовать тег <br>
|
left |
таблица прижимается влево (используется по умолчанию) |
right |
таблица прижимается вправо (текст в ячейках прижимается влево) |
|
valign |
top, middle, bottom |
Вертикальное расположение текста в таблице
|
top |
текст прижимается к верхней границе |
middle |
текст выравнивается посередине |
bottom |
текст прижимается к нижней границе |
|
width |
целое |
Ширина таблицы в пикселях или в процентах от ширины экрана. Для задания n в процентах используется знак (%) процента
|
Браузер использует это значение, если оно не конфликтует с требованиями ширины ячеек
|
height |
целое |
Высота таблицы в пикселях или в процентах от высоты экрана. Для задания n в процентах используется знак (%) процента
|
Браузер использует это значение, если оно не конфликтует с требованиями высоты ячеек
|
background |
URL |
Фон в виде графического файла |
|
bgcolor |
|
Цвет фона |
|
border |
целое |
Ширина рамки в пикселях |
По умолчанию рамка не рисуется |
bordercolor |
|
Цвет рамки |
|
bordercolorlight |
|
Цвет рамки с тенью (псевдо-трехмерная графика) |
Используется вместе с атрибутами border и bordercolordark |
bordercolordark |
целое |
Цвет рамки с тенью (псевдо-трехмерная графика) |
Используется вместе с атрибутами border и bordercolorlight |
cellpadding |
целое |
Расстояние в пикселях между границами ячеек и их содержимым |
|
cellspacing |
целое |
Расстояние в пикселях между границами соседних ячеек, а также внешней рамкой таблицы |
|
cols |
целое |
Число столбцов в таблице |
Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц |
frame |
void, above, below, hsides, lhs, rhs, vsides, box, border |
Метод отрисовки рамки |
void |
убирает наружную часть рамки |
above |
показывает верхнюю границу таблицы |
below |
показывает нижнюю границу таблицы |
hsides |
показывает верхнюю и нижнюю границу таблицы |
lhs |
показывает левую границу таблицы |
rhs |
показывает правую границу таблицы |
vsides |
показывает левую и правую границу таблицы |
box |
показывает полную рамку таблицы |
border |
показывает полную рамку таблицы |
|
rules |
none, groups, rows, cols, all |
Метод отрисовки разделительных линий (внутренних границ) таблицы |
none |
убирает все внутренние границы |
groups |
показывает горизонтальные границы между всеми группами таблицы groups, которые определены элементами thead, tbody, tfoot, и colgroup |
rows |
показывает горизонтальные границы между всеми рядами таблицы |
cols |
показывает вертикальные границы между всеми колонками таблицы |
all |
показывает все границы |
|
Атрибуты тега <tr>
имя атрибута | возможные значения | смысл | примечания |
align |
left, center, right, justify, char |
Горизонтальное выравнивание текста в строке
|
left |
по левому краю |
center |
по центру |
right |
по правому краю |
justify |
по ширине |
char |
по символу, который задается атрибутом char , например, char="." |
|
valign |
top, middle, bottom |
Вертикальное выравнивание текста в строке
|
top |
по верхней границе |
middle |
по середине |
bottom |
по нижней границе |
|
Атрибуты тегов <td>, <th>
имя атрибута | возможные значения | смысл | примечания |
nowrap |
|
Подавляет перенос слов |
Эквивалентно использованию непрерывных пробелов ( ) вместо обычных пробелов в пределах содержимого ячейки |
rowspan |
целое |
Число строк, перекрываемых ячейкой |
По умолчанию 1 |
colspan |
целое |
Число столбцов, перекрываемых ячейкой |
По умолчанию 1 |
colspec |
|
Ширина колонки в символах или в процентах |
Например, colspec="20%" |
align |
left, center, right, justify, char |
Горизонтальное выравнивание текста в строке
|
left |
по левому краю |
center |
по центру |
right |
по правому краю |
justify |
по ширине |
char |
по символу, который задается атрибутом char , например, char="." |
По умолчанию left или значение для включающего <tr>
|
valign |
top, middle, bottom |
Вертикальное выравнивание текста в строке
|
top |
по верхней границе |
middle |
по середине |
bottom |
по нижней границе |
Перекрывается значением атрибута valign во включающем <tr>
|
width |
целое |
Ширина ячейки в пикселях или процентах от ширины таблицы
|
Браузер использует это значение, если оно не конфликтует с требованиями ширины соседних ячеек того же столбца
|
height |
целое |
Высота ячейки в пикселях или в процентах от высоты таблицы
|
Браузер использует это значение, если оно не конфликтует с требованиями высоты ячеек той же строки
|
background, bgcolor, bordercolor, bordercolorlight, bordercolordark |
|
|
Аналогично атрибутам элемента <table>
|
Практически все атрибуты табличных тегов считаются устаревшими.
Таблицы HTML – валидное оформление таблиц по стандарту HTML5.
Читать дальше: Фреймы в HTML