CSS Таблицы
Внешний вид HTML таблицы можно значительно улучшить с помощью CSS:
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Berglunds snabbköp | Christina Berglund | Sweden |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Königlich Essen | Philip Cramer | Germany |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Попробуйте сами »
Границы таблицы
Чтобы указать границы таблицы в CSS, используйте свойство border
.
В приведенном ниже примере указана чёрная граница для элементов <table>
, <th>
и <td>
:
Таблица на всю ширину
В некоторых случаях приведенная выше таблица может показаться маленькой. Если вам нужна таблица, которая должна занимать весь экран (во всю ширину), добавьте width: 100%
к элементу <table>
:
Двойные границы
Обратите внимание, что таблица в приведенных выше примерах имеет двойные границы. Это связано с тем, что и таблица, и элементы <th>
и <td>
имеют отдельные границы.
Чтобы удалить двойные границы, посмотрите на пример ниже.
Свернуть границы таблицы
Свойство border-collapse
устанавливает, должны ли границы таблицы сворачиваться в единую границу:
Если вам нужна лишь граница вокруг таблицы, укажите только свойство border
для <table>
: