Как задать ширину таблицы html
Перейти к содержимому

Как задать ширину таблицы html

  • автор:

Ширина и высота таблицы в HTML

С помощью атрибутов width и height можно задать ширину и высоту таблице. Зададим, например, нашей таблице ширину в 300 пикселей, а высоту — в 200 :

cell 1 cell 2 cell 3
cell 4 cell 5 cell 6
cell 7 cell 8 cell 9

Добавьте вашей таблице ширину 400 пикселей и высоту 300 .

Трепачёв Дмитрий © 2012-2024
t.me/trepachev_dmitry

Колонки таблицы равной ширины

Я создаю таблицу и выставляю в процентах ширину каждого столбца. Для примера, второй столбец должен иметь ширину в 30%, четвертый — 10% .Это работает во многих случаях, но, если название колонки длинное, ширина всего столбца расширяется до ширина названия колонки. Каким образом можно избежать такого поведения, создать таблицу с жестко выставленной (в процентах) шириной столбцов?

table < width: 100% >table>tbody>tr>td < width: 20% >table>thead>tr>th < padding: 10px; overflow: hidden; >table>tbody>tr>td:nth-of-type(2) < width: 30% >table>tbody>tr>td:nth-of-type(4)
 
Group 1 Group 2
Group 3 Group 4
Column 1 Column 2 Column 3 TooLongColumn4Title Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

2.8. CSS-таблицы

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

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

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

  • Содержание:
  • 1. Границы таблицы border
  • 2. Как задать ширину и высоту таблицы
  • 3. Как задать фон таблицы
  • 4. Столбцы таблицы
  • 5. Как добавить таблице заголовок
  • 6. Как убрать промежуток между рамками ячеек
  • 7. Как увеличить промежуток между рамками ячеек
  • 8. Как скрыть пустые ячейки таблицы
  • 9. Компоновка макета таблицы с помощью свойства table-layout
  • 10. Лучшие макеты таблиц (Топ-10 таблиц)

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

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

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

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

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

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

th, td

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

table

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

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

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

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

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

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

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

table < width: 600px; >th < width: 20%; >td:first-child

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

th, td

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

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

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

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

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

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

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

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

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

caption-side
Значения:
top Заголовок таблицы располагается над таблицей. Значение по умолчанию.
bottom Располагает заголовок под таблицей.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
  .
Таблица № 1
Company Q1 Q2 Q3 Q4
caption

caption_side

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

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

border-collapse
Значения:
separate Рамки ячеек располагаются раздельно.
collapse Рамки ячеек сливаются в одну, а промежутки между рамками убираются.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
table

table_border_collapse

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

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

border-spacing
Значения:
Добавляет промежутки между рамками как по вертикали, так и по горизонтали. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая — вертикальный.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
table < border-collapse: separate; border-spacing: 10px 20px; >table

table_border_spacing

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

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

empty-cells
Значения:
show Рамка и фон пустой ячейки будут отрисовываться так же, как для ячейки таблицы, имеющей содержимое.
hide Если все ячейки строки пусты, то вся строка отображается так, если бы было задано значение display: none .
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
 
Company Q1 Q2 Q3
Microsoft 20.3 30.5
Google 50.2 40.63 45.23
table < border: 1px solid #69c; border-collapse: separate; empty-cells: hide; >th, td

table_empty

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

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

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

table-layout
Значения:
auto Значение по умолчанию. Ширина макета таблицы определяется шириной её содержимого с учетом значений свойств padding-left , padding-right , border-left width плюс одна ширина border-right последней ячейки в ряду, или заданной шириной ячеек и толщиной рамки. Если ширина ячеек не задана явно, они могут быть разной ширины.
fixed Свойство сработает только в том случае, если для таблицы задана ширина. Ширина ячеек будет одинаковой, а содержимое ячеек, которое не помещается в ячейку, будет наползать под содержимое соседней ячейки.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
table

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

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

top-table

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

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

top-table1

 
EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie
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

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

top-table2

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

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

top-table3

th < font-weight: normal; color: #039; padding: 10px 15px; >td < color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; >tr:hover td
2. Вертикальный минимализм

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

top-table4

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
3. «Коробочный» стиль

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

top-table5

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

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

top-table6

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
4. Горизонтальная зебра

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

top-table7

th < font-weight: normal; color: #039; padding: 10px 15px; >td < color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; >tr:nth-child(2n)
5. Газетный стиль

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

top-table8

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

top-table9

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

top-table10

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
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

или ширина ячейки таблицы html

Атрибут width HTML используется для установки ширины ячейки таблицы, которое переопределяет значение по умолчанию. Он устарел. Используйте CSS для управления разметкой ячеек в HTML таблицах .

Настройка ширины столбца таблицы в HTML

 
Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that we might even need a line break.

Тег td используется в HTML для создания ячеек в строках таблицы.

Как видите, в первом случае мы не применили CSS или HTML td width . Что браузер сделает с такой таблицей?

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that we might even need a line break.

Браузер выделил для второго столбца намного больше места, чем для первого. Теперь сделаем то же самое, но воспользуемся атрибутом width , чтобы принудительно задать столбцам одинаковый размер:

 
Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that we might even need a line break.

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

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that we might even need a line break.

Довольно неплохо. К сожалению, это некорректный HTML- код , поскольку HTML table width был признан устаревшим. Но можно сделать то же самое с помощью простого кода CSS :

 .equal-width td 
Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

Давайте посмотрим, как браузер выведет таблицу, использующую CSS вместо атрибута width :

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

Регулируемая высота строки таблицы

Еще один атрибут, тесно связанный с шириной, это высота ( height ). Этот атрибут также устарел, поэтому его не следует использовать. Но поскольку мы говорим о настройке ширины столбцов, то нужно рассмотреть и регулировку высоты строк. Вот как это делалось раньше с помощью устаревшего атрибута:

 
Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

Как браузер выводит этот пример:

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

Поскольку HTML table column width устарел, мы покажем, как сделать то же самое с помощью CSS :

 .tall-row td 
Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

Браузер должен отобразить этот код практически идентично предыдущему. Давайте посмотрим, так ли это:

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.
 .tall-row td 
Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.
Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *