Таблицы в HTML

Таблица – один из основных инструментов для создания web-страниц. Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Для создания таблиц используется тег < TABLE> < /TABLE>

Теги которые используются для построения таблиц:

< caption> < /caption> – определяет название для таблицы

< tr> < /tr> – новая строка в таблице

< td> < /td> – новый столбец в таблице

< th> < /th> – названия столбцов, расположенных в первой строке

У тега < TABLE> существует ряд параметров:

width – задает ширину таблицы (в пикселях или % от ширины экрана)

bgcolor – задает цвет фона ячеек таблицы

background – заливает фон таблицы рисунком

border – задает рамку указанной ширины (в пикселях) вокруг всей таблицы

align – задает выравнивание таблицы: справа (right), слева (left), по центру (center)

cellspacing – задает расстояние между ячейками таблицы (в пикселях),

cellpadding – задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселях)

frame – задает вид рамки вокруг таблицы и может принимать следующие значения:

void – рамки нет

above – только верхняя рамка

below – только нижняя рамка

hsides – только верхняя и нижняя рамки

vsides – только левая и правая рамки

lhs – только левая рамка

rhs – только правая рамка

box – все четыре части рамки

rules – задает вид внутренних границ таблицы и может принимать следующие значения:

none – между ячейками нет границ

groups – границы только между группами строк и группами столбцов

rows – границы только между строками

cols – границы только между стобцами

all – отображать все границы

Для тегов < tr> и < td > можно использовать параметры:

align – выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center)

valign – выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle)

bgcolor – задает цвет строки

width – задает ширину столбца (в пикселях или в процентном соотношении, где за 100% принимается ширина таблицы)

height – задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты

В случае < tr> – параметры будут распространяться только на строку.

В случае < td> – параметры будут распространяться только на ячейку.

Пример: < html> < head> < title> < /title> < /head> < body> < table width=" 300" bgcolor=" green" border=" 1" align=" center" cellspacing=" 5" cellpadding=" 10" rules=" rows" frame=" void" >   < caption> Название таблицы< /caption> < tr> < th> 1< /th> < th> 2< /th> < th> 3< /th> < /tr> < tr> < td> 11< /td> < td> 12< /td> < td> 13< /td> < /tr>   < tr> < td> 21< /td> < td> 22< /td> < td> 23< /td> < /tr> < tr> < td> 31< /td> < td> 32< /td> < td> 33< /td> < /tr> < /table> < br> < table align=" center" > < tr align=" center" valign=" middle" bgcolor=" yellow" > < td bgcolor=" red" > красного цвета < /td> < td bgcolor=" green" > зеленого цвета < /td> < td> желтого цвета < /td> < /tr> < /table>   < /body> < /html>   Результат:

Создание сложных таблиц:

В таблицах можно объединить смежные ячейки в строках и в столбцах, в более крупные блоки.

Для объединения 2–х смежных ячеек в строке используются теги:

< th rowspan= " 3 " >

< td rowspan= " 3 " >

Для объединения 2–х смежных ячеек в столбце используются теги:

< th colspan= " 3 " >

< td colspan= " 3 " >

Значением этого параметра является число, указывающее сколько столбцов/строк будет объединено.

Пример: < html> < head> < title> < /title> < /head> < body> < table width=" 200" border=" 1" align=" left" cellspacing=" 0" cellpadding=" 10" > < tr> < td colspan=" 3" > Заголовок < /td> < /tr>   < tr> < td> 1< /td> < td> 2< /td> < td rowspan=" 2" > 5< /td>   < /tr>   < tr> < td> 4< /td> < td> 3< /td> < /table> < /tr>   < /body> < /html> Результат: