Поиск…


Синтаксис

  • таблица-макет: авто | фиксированный;
  • пограничный коллапс: отдельный | разрушаться;
  • 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 . Первый отображает пустые ячейки, а последний - нет.

Значение Описание
шоу Это значение по умолчанию. Он отображает ячейки, даже если они пусты.
скрывать Это значение скрывает ячейку вообще, если в ячейке нет содержимого.

Дополнительная информация:

Надпись на стороне

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

Ниже пример с двумя таблицами с разными значениями, установленными для свойства caption-side :

введите описание изображения здесь

Таблица слева имеет caption-side: top а справа caption-side: bottom .

Значение Описание
Топ Это значение по умолчанию. Он помещает надпись над столом.
низ Это значение помещает подпись ниже таблицы.


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow