CSS позволяет оформлять таблицы.

Пример оформления таблицы

table, th, td
{
border-style:solid;
border-width:1px;
border-collapse:collapse;
padding:2px;
}
th 
{
height:28px;
background-color:#f892dc;
color:white;
border-color:black;
}
.ts1 
{
background-color:#ffeffb;
}

Ширина и Высота таблицы

С помощью CSS свойства width Вы можете устанавливать ширину таблицы.

В основном ширина устанавливается в пикселях или %, но можно также использовать cm и em.

.tab1 
{
width:100%;
}
.tab2
{
width:70%;
}
.tab3
{
width:300px;
}

CSS свойство height позволяет установить высоту таблицы. Высота в основном указывается в пикселях, но можно также использовать cm и em.

.tab1 
{
height:200px;
}
.tab2
{
height:7cm;
}

Оформление границ

Для оформления табличных границ в CSS используется свойство border.

table, th, td 
{
border-style:solid;
border-color:green;
border-width:1px;
}

Обратите внимание: свойство border не является уникальным свойством таблиц оно может использоваться с любыми элементами. Данное свойство будет подробно рассмотрено далее в данном учебнике.

Свойство border-collapse

Таблица в примере выше имеет двойную границу, потому что и сама таблица и ее ячейки (элементы th и td) имеют собственные границы.

Свойство border-collapse позволяет соединить границы таблицы и ячеек. Соединенные границы обычно смотрятся более аккуратно и красиво.

table, th, td 
{
border-style:solid;
border-color:green;
border-width:1px;
border-collapse:collapse;
}

Выравнивание табличного текста

С помощью свойства text-align Вы можете выравнивать текст табличных ячеек по горизонтали. Текст может быть выравнен:

• По левому краю (значение left)
• По правому краю (right)
• По центру (center)

.tab1
{
text-align:right;
}
.tab2
{
text-align:left;
}
.tab3
{
text-align:center;
}

С помощью свойства vertical-align Вы можете выравнивать текст табличных ячеек по вертикали. Текст может быть выравнен:

• По верхней границе (top)
• По центру (middle)
• По нижней границе (bottom)

.top
{
vertical-align:top;
}
.mid
{
vertical-align:middle;
}
.bot
{
vertical-align:bottom;
}

Свойство padding

С помощью свойства padding Вы можете устанавливать величину отступа между границей ячейки и ее содержимым.

#tab1 td
{
padding:10px;
}
#tab2 td
{
padding:5px;
}
#tab3 td
{
padding:0px;
}

Сделайте сами

Задание 1 повторите таблицу в редакторе:

Ширина таблицы равна 700 пикселей. Высота первой строки равна 70 пикселей. Границы таблицы 
и ячеек соединены.


Текст ячейки 
выравнен по верхнему краю
Текст ячейки 
выравнен по центру
Текст ячейки 
выравнен по нижнему краю
Текст ячейки 
выравнен по центру


Толщина границы этой 
ячейки равна 2 пикселя
Толщина границы этой 
ячейки равна 3 пикселя
Толщина границы этой 
ячейки равна 4 пикселя
Толщина границы этой 
ячейки равна 1 пиксель


Текст ячейки 
выравнен по 
левому краю
Текст ячейки 
выравнен по 
правому краю
Текст ячейки выравнен по центру