CSS
таблицы
Поиск…
Синтаксис
- таблица-макет: авто | фиксированный;
- пограничный коллапс: отдельный | разрушаться;
- border-spacing: <длина> | <длина> <длина>;
- empty-cells: show | скрывать;
- сторона заголовка: верх | низ;
замечания
Эти свойства применяются как к элементам <table> (*), так и к элементам HTML, отображаемым как display: table или display: inline-table
(*) <table> , очевидно, изначально обозначены UA / браузерами как display: table
HTML-таблицы семантически допустимы для табличных данных. Не рекомендуется использовать таблицы для макета. Вместо этого используйте CSS.
Стол-макет
Свойство table-layout изменяет алгоритм, используемый для компоновки таблицы.
Ниже пример двух таблиц, которые установлены в width: 150px :
В таблице слева есть table-layout: auto а в правой - table-layout: fixed . Первый шире, чем указанная ширина (210px вместо 150px), но содержимое подходит. Последний принимает заданную ширину 150 пикселей, независимо от того, происходит ли переполнение содержимого или нет.
| Значение | Описание |
|---|---|
| авто | Это значение по умолчанию. Он определяет макет таблицы, определяемый содержимым его «ячеек». |
| фиксированный | Это значение устанавливает, что макет таблицы определяется по свойству width, предоставленному в таблицу. Если содержимое ячейки превышает эту ширину, ячейка не будет изменять размер, а вместо этого позволить переполнение содержимого. |
границы коллапса
Свойство border-collapse определяет, следует ли разделять или объединять границы таблиц.
Ниже приведен пример двух таблиц с разными значениями для свойства border-collapse :
Стол слева имеет border-collapse: separate а один справа имеет border-collapse: collapse .
| Значение | Описание |
|---|---|
| отдельный | Это значение по умолчанию. Это делает границы таблицы отдельно друг от друга. |
| коллапс | Это значение устанавливает, что границы таблицы сливаются вместе, а не различаются. |
границы разнос
Свойство border-spacing определяет интервал между ячейками. Это не имеет никакого эффекта, если border-collapse будет separate .
Ниже пример двух таблиц с разными значениями для свойства border-spacing :
В таблице слева есть border-spacing: 2px (по умолчанию), а справа - border-spacing: 8px .
| Значение | Описание |
|---|---|
| <длина> | Это поведение по умолчанию, хотя точное значение может различаться между браузерами. |
| <длина> <длина> | Этот синтаксис позволяет задавать отдельные горизонтальные и вертикальные значения соответственно. |
пустые клетки-
Свойство empty-cells определяет, должны ли отображаться ячейки без содержимого. Это не имеет никакого эффекта, если border-collapse будет separate .
Ниже пример с двумя таблицами с разными значениями, установленными в свойстве empty-cells :
В таблице слева есть empty-cells: show а справа - empty-cells: hide . Первый отображает пустые ячейки, а последний - нет.
| Значение | Описание |
|---|---|
| шоу | Это значение по умолчанию. Он отображает ячейки, даже если они пусты. |
| скрывать | Это значение скрывает ячейку вообще, если в ячейке нет содержимого. |
Дополнительная информация:
- https://www.w3.org/TR/CSS21/tables.html#empty-cells
- https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells
- http://codepen.io/SitePoint/pen/yfhtq
- https://css-tricks.com/almanac/properties/e/empty-cells/
Надпись на стороне
Свойство caption-side определяет вертикальное позиционирование элемента <caption> внутри таблицы. Это не имеет никакого эффекта, если такой элемент не существует.
Ниже пример с двумя таблицами с разными значениями, установленными для свойства caption-side :
Таблица слева имеет caption-side: top а справа caption-side: bottom .
| Значение | Описание |
|---|---|
| Топ | Это значение по умолчанию. Он помещает надпись над столом. |
| низ | Это значение помещает подпись ниже таблицы. |