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>:
