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