Какое свойство css является аналогом атрибута border элемента table

Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.

Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.

Форматирование таблиц

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border:

table {
border-collapse: collapse;
/*убираем пустые промежутки между ячейками*/
border: 1px solid grey;
/*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
}

Границы ячеек заголовка каждого столбца задаются для элемента th:

th {
border: 1px solid grey;
}

Границы ячеек тела таблицы задаются для элемента td:

td {
border: 1px solid grey;
}

Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом:

th, td {
border: 1px solid grey;
}

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

table {
border: 3px solid grey;
}

Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */
table {
border-top: 3px solid grey;
}
/* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */
td {
border-bottom: 1px solid grey;
}

Подробнее о свойстве border вы можете прочитать здесь.

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

Ширина таблицы и столбцов задаётся с помощью свойства width. Если для таблицы задано table {width: 100%;}, то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или %, например:

table {
width: 600px;
}
th {
width: 20%;
}
td:first-child {
width: 30%;
}

Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов <td> и <th>.

Фиксировать высоту с помощью свойства height не рекомендуется.

th, td {
padding: 10px 15px;
}

3. Как задать фон таблицы

По умолчанию фон таблицы и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:

• заливка сплошным цветом,
• градиентная заливка,
• фоновое изображение.

4. Столбцы таблицы

Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью элемента <tr>. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:

• с помощью элемента <col> можно задать фон для любого количества столбцов;
• с помощью селектора table td:first-child, table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
• с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

Подробнее про элемент <col> вы можете прочитать здесь.

Подробнее про CSS-селекторы вы сможете прочитать здесь.

5. Как добавить таблице заголовок

Добавить заголовок в таблицу можно с помощью элемента <caption>, а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align.

Свойство наследуется.

<table>
<caption>Таблица № 1</caption>
<tr>
<th>Company</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
</tr>
…
</table>
caption {
caption-side: bottom;
text-align: right;
padding: 10px 0;
font-size: 14px;
}
Рис. 1. Пример отображения заголовка под таблицей

6. Как убрать промежуток между рамками ячеек

Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse, то промежуток уберётся.

Свойство наследуется.

Синтаксис

table {
border-collapse: collapse;
}
Рис. 2. Пример таблиц со сливающимися и раздельными рамками ячеек

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом.

Свойство наследуется.

Синтаксис

table {
border-collapse: separate;
border-spacing: 10px 20px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}
Рис. 3. Пример таблиц с увеличенными промежутками между рамками ячеек

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;}, то ячейка не будет скрыта.

Свойство наследуется.

<table>
<tr>
<th>Company</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
<tr>
<td>Microsoft</td>
<td>20.3</td>
<td>30.5</td>
<td></td>
</tr>
<tr>
<td>Google</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
</tr>
</table>
table {
border: 1px solid #69c;
border-collapse: separate;
empty-cells: hide;
}
th, td {
border: 2px solid #69c;
}
Рис. 4. Пример скрытия пустой ячейки таблицы

9. Компоновка макета таблицы с помощью свойства table-layout

Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек.

Свойство не наследуется.

Синтаксис

table {
table-layout: fixed;
}

10. Лучшие макеты таблиц

По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine

Перейти на страницу с примерами

1. Горизонтальный минимализм

Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th.

<table>
<tr><th>Employee</th><th>Salary</th><th>Bonus</th><th>Supervisor</th></tr>
<tr><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>
<tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>
<tr><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>
<tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>
</table>
table {
font-family: “Lucida Sans Unicode”, “Lucida Grande”, Sans-Serif;
font-size: 14px;
background: white;
max-width: 70%;
width: 70%;
border-collapse: collapse;
text-align: left;
}
th {
font-weight: normal;
color: #039;
border-bottom: 2px solid #6678b1;
padding: 10px 8px;
}
td {
color: #669;
padding: 9px 8px;
transition: .3s linear;
}
tr:hover td {
color: #6699ff;
}

При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td.

td {
border-bottom: 1px solid #ccc;
color: #669;
padding: 9px 8px;
transition: .3s linear;
}
/*остальной код – как в примере выше*/

Добавление эффекта :hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.

th {
font-weight: normal;
color: #039;
padding: 10px 15px;
}
td {
color: #669;
border-top: 1px solid #e8edff;
padding: 10px 15px;
}
tr:hover td {
background: #e8edff;
}

2. Вертикальный минимализм

Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.

th {
font-weight: normal;
border-bottom: 2px solid #6678b1;
border-right: 30px solid white;
border-left: 30px solid white;
color: #039;
padding: 8px 2px;
}
td {
border-right: 30px solid white;
border-left: 30px solid white;
color: #669;
padding: 12px 2px;
}

3. «Коробочный» стиль

Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.

th {
font-size: 13px;
font-weight: normal;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid white;
color: #039;
padding: 8px;
}
td {
background: #e8edff;
border-bottom: 1px solid white;
color: #669;
border-top: 1px solid transparent;
padding: 8px;
}
tr:hover td {
background: #ccddff;
}

Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.

table {
font-family: “Lucida Sans Unicode”, “Lucida Grande”, Sans-Serif;
font-size: 14px;
max-width: 70%;
width: 70%;
text-align: center;
border-collapse: collapse;
border-top: 7px solid #9baff1;
border-bottom: 7px solid #9baff1;
}
th {
font-size: 13px;
font-weight: normal;
background: #e8edff;
border-right: 1px solid #9baff1;
border-left: 1px solid #9baff1;
color: #039;
padding: 8px;
}
td {
background: #e8edff;
border-right: 1px solid #aabcfe;
border-left: 1px solid #aabcfe;
color: #669;
padding: 8px;
}

4. Горизонтальная зебра

Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.

th {
font-weight: normal;
color: #039;
padding: 10px 15px;
}
td {
color: #669;
border-top: 1px solid #e8edff;
padding: 10px 15px;
}
tr:nth-child(2n) {
background: #e8edff;
}

5. Газетный стиль

Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект :hover при наведении на строку.

table {
border: 1px solid #69c;
}
th {
font-weight: normal;
color: #039;
border-bottom: 1px dashed #69c;
padding: 12px 17px;
}
td {
color: #669;
padding: 7px 17px;
}
tr:hover td {
background: #ccddff;
}

table {
border: 1px solid #69c;
}
th {
font-weight: normal;
color: #039;
padding: 10px;
}
td {
color: #669;
border-top: 1px dashed white;
padding: 10px;
background:#ccddff;
}
tr:hover td {
background: #99bcff;
}

table {
border: 1px solid #6cf;
}
th {
font-weight: normal;
font-size: 13px;
color: #039;
text-transform: uppercase;
border-right: 1px solid #0865c2;
border-top: 1px solid #0865c2;
border-left: 1px solid #0865c2;
border-bottom: 1px solid white;
padding: 20px;
}
td {
color: #669;
border-right: 1px dashed #6cf;
padding: 10px 20px;
}

6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

table {
background: url(“https://html5book.ru/wp-content/uploads/2019/04/suggestions.png”) 98% 86% no-repeat;
}
th {
font-weight: normal;
font-size: 14px;
color: #339;
padding: 10px 12px;
background: white;
}
td {
color: #669;
border-top: 1px solid white;
padding: 10px 12px;
background: rgba(51, 51, 153, .2);
transition: .3s;
}
tr:hover td {
background: rgba(51, 51, 153, .1);
}