САМОУЧКА Сайт для тех, кто хочет научиться

Главная

О Нас

Публикации

Связь

Наши публикации

HTML для новичков

XHTML

CSS для новичков

CSS 3

JavaScript

< Предыдущая Следующая >

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 пиксель
Текст ячейки  выравнен по  левому краю	Текст ячейки  выравнен по  правому краю	Текст ячейки выравнен по центру

< Предыдущая Следующая >

Последние добавления

HTML для новичков

XHTML

CSS для новичков