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>:
Фамилия | Имя |
---|---|
Щипунов | Андрей |
Щипунова | Кристина |
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;
}
Попробуйте сами »