УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS Урок 10 Таблицы


« Назад Далее »

Вид HTML таблицы может быть значительно улучшен с помощью CSS:

Книга Автор Категория
Приключения Тома Сойера Марк Твен Художественная
Гордость и предубеждение Джейн Остен Художественная
Происхождение видов Чарльз Дарвин Научная
Лавка древностей Чарльз Диккенс Художественная
Ромео и Джульетта Вильям Шекспир Пьеса
Вий Максим Гоголь Мистика
Кинжал челлини Джеймс Х. Чейз Детектив

Границы Таблиц

Чтобы указать границы таблиц в CSS, используйте свойство border.

Пример ниже указывает черную границу для элементов table, th, и td:

Пример

table,th,td
{
border:1px solid black;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Заметьте, что таблица в примере выше имеет двойные границы. Это потому, что как элемент table, так и элементы th/td - имеют отдельные границы.

Чтобы отобразить одинарную границу для таблицы, используйте свойство border-collapse.

Свернутые Границы

Свойство border-collapse устанавливает, будут ли границы таблицы свернуты в одинарную границу, или будут отображаться отдельно:

Пример

table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


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

Ширина и высота таблицы определяются с помощью свойств width и height.

Пример ниже устанавливает ширину таблицы в 100%, и высоту элементов th в 50px:

Пример

table
{
width:100%;
}
th
{
height:50px;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Выравнивание Текста Таблицы

Текст в таблице выравнивается с помощью свойств text-align и vertical-align.

Свойство text-align указывает горизонтальное выравнивание, например, по левому краю (left), по правому краю (right), или по центру (center):

Пример

td
{
text-align:right;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Свойство vertical-align устанавливает вертикальное выравнивание, например, по верху (top), по низу (bottom), или по середине (middle):

Пример

td
{
height:50px;
vertical-align:bottom;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Свойство Padding Таблицы

Чтобы контролировать пространство между границей и содержанием в таблице, используйте свойствоuse padding в элементах td и th:

Пример

td
{
padding:15px;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Цвет Таблицы

Пример ниже указывает цвет границ, текста и фона элементов th:

Пример

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Примеры

Еще примеры

Создание необычной таблицы
Этот пример демонстрирует как создать необычную таблицу.

Установка положения заголовка таблицы
Этот пример демонстрирует как позиционировать заголовок таблицы.





« Назад Далее »



© 2011 - 2022 Уроки CSS