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