Верстка таблиц

Значения свойства display

table
прямоугольный блок,который обрабатывается как блочный элемент
inline
элемент определяет прямоугольный блок,который генерирует строковый блок
table-row
элемент является строкой ячеек
table-row-group
элемент объединяет одну или несколько строк
table-header-group
похоже на table-row-group
table-footer-group
похоже на table-header-group(исключение,что группа строк нижнего заголовка отображается после всех остальных строк и групп строк)
table-column
элемент описывает столбец ячеек
table-column-group
элемент объединяет один или несколько столбцов
table-cell
элемент представляет отдельно ячейку таблицы
table-caption
определяет основной заголовок таблицы

Столбцы

В CSS столбцы и группы столбцов принимают четыре свойства стиля:

1)border
рамки могут быть заданы,если свойство border-collapse имеет значение collapse

2)background
фон столбца или группы столбцов будет видимым только в ячейках, в которых и ячейка, и ее строка имеют прозрачный фон

3)width
определяет минимальную ширину столбца или группы столбцов

4)visibility
если свойство имет значение collapse,то визуально представление ни одной из ячеек столбца не генерируется

Рамки ячеек таблицы

separate
модель отдельных рамок
table{border-collapse:separate;}
td{border:3px double black ;padding:3px;}

ячейка 1	ячейка 2
ячейка 3	ячейка 4

Рамки ячеек касаются друг друга,но не сливаются вместе.

border-spacing
Для задания одной или двух длин между ячейками.Первая определяет горизонтальный промежуток,а вторая-вертикальный.
table{border-spacing:5px 20px;}

Задание размеров таблиц

ширина

Для вычисления ширины таблицы применяется свойство table-layout
Макет таблицы задается с фиксированной шириной(fixed) и автоматически определяемой шириной (auto)

table{table-layout:fixed;width:400px;}
table{table-layout:auto;width:auto;}

высота

Высото определяется свойством height

Выравнивание

Для выравнивания предназначено свойство text-align(горизонтальное).Чтобы выровнять содержимое ячейки по вертикали, применяется свойство vertical-align:
top
выравнивание по верху строки
bottom
выравнивание по низу строки
middle
выравнивание по середине строки

r1c1{vertical-align:top;height:10em;}
r1c2{vertical-align:middle;}
r1c3{vertical-align:bottom;}