|
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):
Пример
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Свойство vertical-align устанавливает вертикальное выравнивание, например, по верху (top), по низу (bottom), или
по середине (middle):
Примерtd
{
height:50px;
vertical-align:bottom;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Свойство Padding ТаблицыЧтобы контролировать пространство между границей и содержанием в таблице, используйте свойствоuse padding
в элементах td и th:
Пример
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Цвет ТаблицыПример ниже указывает цвет границ, текста и фона элементов th:
Примерtable, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
 |
Еще примеры |
Создание необычной таблицы
Этот пример демонстрирует как создать необычную таблицу.
Установка положения заголовка таблицы
Этот пример демонстрирует как позиционировать заголовок таблицы.
|
