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% к элементу <таблица>:
| Фамилия | Имя |
|---|---|
| Щипунов | Андрей |
| Щипунова | Кристина |
Двойные границы
Обратите внимание, что таблица в приведенных выше примерах имеет двойные границы. Это связано с тем, что как таблица, так и элементы <th> и <td> имеют отдельные границы.
Чтобы удалить двойные границы, взгляните на приведенный ниже пример.
Свернуть границы таблицы
Свойство border-collapse задает, следует ли сворачивать границы таблицы в единую границу:
| Фамилия | Имя |
|---|---|
| Щипунов | Андрей |
| Щипунова | Кристина |
Если вам нужна только граница вокруг таблицы, укажите только свойство border для <table>:
| Фамилия | Имя |
|---|---|
| Щипунов | Андрей |
| Щипунова | Кристина |