Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Таблицы 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 Подавляет перенос слов Эквивалентно использованию непрерывных пробелов (&nbsp;) вместо обычных пробелов в пределах содержимого ячейки
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


.