|
Plati.ru - Магазин цифровых товаров: пин-коды для игр, интернета и IP-телефонии, электронные книги, программное обеспечение, красивые номера ICQ и многое другое. Зайди и убедись сам! |
Заголовок.
Внешний вид таблиц можно значительно улучшить с помощью CSS.
| Имя | Фамилия | Сбережения |
|---|---|---|
| Петр | Сидоров | $100 |
| Алексей | Выхухолев | $150 |
| Женя | Вдрызг | $300 |
| Леонид | Оксолинин | $120 |
Границы ячеек в таблице
Для настройки оформления границ в таблице используется свойство border.
В следующем примере элементам table, th и td задается черная граница:
Обратите внимание, что в приведенном примере таблица имеет двойную границу. Это связано с тем, что элементы table, th и td имеют свою границу.
Для того, чтобы в местах соприкосновения границ отображать одну границу, надо использовать свойство border-collapse.
Свойство border-collapse определяет то, будут ли границы в местах их соприкосновения с другими границами отображаться отдельно или сливаться в одну границу:
Высота и ширина таблицы
Высота и ширина таблицы задаются с помощью свойств width и height.
В примере ниже ширина таблица равна 100%, а высота элемента th — 50px:
Выравнивание текста в таблице
Текст в таблице выравнивается с помощью свойств text-align (выравнивание по горизонтали) и vertical-align (выравнивание по вертикали).
Свойство text-align выравнивает текст по центру, по левому/правому краю или по ширине:
Свойство vertical-align выравнивает текст по верхнему/нижнему краю или по центру:
Поля в таблице
Для управления отступами от границ ячеек до их содержимого используется свойство padding. Его можно использовать для элементов td и th:
Цвет
Пример ниже демонстрирует, как задать цвет границ таблицы, текста в таблице и фонового цвета элемента th:
Пример
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
Примеры
