CSS -таблицы
Внешний вид HTML-таблицы можно значительно улучшить с помощью CSS:
| Компания | Контакт | Страна |
|---|---|---|
| Кормушка Альфреда | Мария Андерс | Германия |
| Супермаркет Берглунда | Кристина Берглунд | Швеция |
| Торговый центр Монтесума | Франсиско Чанг | Мексика |
| серьезная торговля | Роланд Мендель | Австрия |
| Островная торговля | Хелен Беннетт | Соединенное Королевство |
| Королевская еда | Филип Крамер | Германия |
| Смеющийся Бахус Винные погреба | Йоши Таннамури | Канада |
| Собранные продовольственные склады | Джованни Ровелли | Италия |
Границы таблицы
Чтобы указать границы таблицы в CSS, используйте borderсвойство.
В приведенном ниже примере указывается черная рамка для элементов <table>, <th> и <td>:
Пример
table, th, td {
border: 1px solid black;
}
Стол во всю ширину
В некоторых случаях приведенная выше таблица может показаться маленькой. Если вам нужна таблица, которая должна занимать весь экран (во всю ширину), добавьте width: 100%в элемент <table>:
Пример
table {
width: 100%;
}
Двойные границы
Обратите внимание, что таблица в приведенных выше примерах имеет двойные границы. Это связано с тем, что и таблица, и элементы <th> и <td> имеют отдельные границы.
Чтобы удалить двойные границы, взгляните на пример ниже.
Свернуть границы таблицы
Свойство border-collapseустанавливает, должны ли границы таблицы сворачиваться в одну границу:
Пример
table
{
border-collapse: collapse;
}
Если вам нужна только рамка вокруг таблицы, укажите borderсвойство только для <table>:
Пример
table
{
border: 1px solid black;
}