16.07.2026

22

Как выровнять таблицу в css

Выровнять таблицу

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

  
  
# First Last Handle First Last Handle 
   
1 > 
 
Jacob Thornton @fat Jacob Thornton @fat 
 
 
 
Jacob Thornton @fat Jacob Thornton @fat 
 
 		 
 
2 Jacob Thornton @fat Jacob Thornton @fat 
 
3 Larry the Bird @twitter Jacob Thornton @fat

Отслеживать
задан 13 янв 2021 в 15:21
Ilhom Hafizov Ilhom Hafizov
5 1 1 бронзовый знак
а почему вы не сделали одной таблицей?
13 янв 2021 в 16:10

а так, конечно выровнять таблицы очень просто — надо через CSS задать каждой ячейке свою ширину равную с шириной соответствующим ячейкам в другой(-их) таблице(-ах). Как-то так.

13 янв 2021 в 16:12

привет) каждая строка может иметь внутри подстрок, поэтому пришлось внутри одной строки запихнуть другую таблицу

13 янв 2021 в 17:19
значит только с зафиксированной шириной можно решить эту проблему?
13 янв 2021 в 17:21

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

13 янв 2021 в 18:15

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

У меня была похожая задача пару лет назад. Я решил её с помощью тегов без использования таблиц вообще.

.table < display: table; table-layout: fixed; >.table-caption < display: table-caption; >.thead < display: table-header-group; >.tbody < display: table-row-group; transition: all 200ms; >.tfoot < display: table-footer-group; >.tcols < display: table-column-group; >.tr < display: table-row; >.col < display: table-column; >.td < display: table-cell; padding: 3px; >input[type=checkbox]+.tbody>.tr:last-child>.td>label < display: none; >input[type=checkbox]:checked+.tbody>.tr:last-child>.td>label < display: inline; >input[type=checkbox]:checked+.tbody>.tr < display: none; >input[type=checkbox]:checked+.tbody>.tr:last-child < display: table-row; >input[type=checkbox] < display: none; >label:before < width: 16px; height: 16px; content: "\2716"; display: block; >input[type=checkbox]:checked+.tbody>.tr>.td>label:before < content: "\271a"; >.table < border-left: 1px solid #eee; border-top: 1px solid #000; border-bottom: 1px solid #000; >.td < border-right: 1px solid #eee; border-bottom: 1px solid #eee; >.tbody>.tr>.td < border-bottom: 0; >.thead>.tr>.td, .tbody>.tr:last-child>.td, .tbody>.tr:last-child>.td:first-child, .tfoot .td < border-bottom: 1px solid #000; >.thead>.tr:first-child>.td, .tbody>.tr:first-child>.td, .tbody>.tr:last-child>.td, .tfoot .td, input[type=checkbox]:checked+.tbody>.tr:last-child>.td:first-child < border-top: 1px solid; >.tbody>.tr>.td:first-child < border-bottom: 0; >.tbody>.tr:last-child>.td:first-child < border-top: 0; >.tfoot .td, input[type=checkbox]:checked+.tbody>.tr:last-child>.td:first-child
 
Caption
 
Col0s
 
Col1
 
Col2
 
Col3
 
 
 
Col[0]
 
Col[1]
 
Col[2]
 
Col[3]
 
 
  
 
Data[0][0][0]
 
Data[0][0][1]
 
Data[0][0][2]
 
Data[0][0][3]
 
 
Data[0][1][0]
 
Data[0][1][1]
 
Data[0][1][2]
 
Data[0][1][3]
 
 
Data[0][2][0]
 
Data[0][2][1]
 
Data[0][2][2]
 
Data[0][2][3]
 
 
Data[0][3][0]
 
Data[0][3][1]
 
Data[0][3][2]
 
Data[0][3][3]
 
 
Data[0][4][0]
 
Data[0][4][1]
 
Data[0][4][2]
 
Data[0][4][3]
 
 
Subtotal[0][0]
 
Subtotal[0][1]
 
Subtotal[0][2]
 
Subtotal[0][3]
 
 
  
 
Data[1][0][0]
 
Data[1][0][1]
 
Data[1][0][2]
 
Data[1][0][3]
 
 
Data[1][1][0]
 
Data[1][1][1]
 
Data[1][1][2]
 
Data[1][1][3]
 
 
Data[1][2][0]
 
Data[1][2][1]
 
Data[1][2][2]
 
Data[1][2][3]
 
 
Data[1][3][0]
 
Data[1][3][1]
 
Data[1][3][2]
 
Data[1][3][3]
 
 
Data[1][4][0]
 
Data[1][4][1]
 
Data[1][4][2]
 
Data[1][4][3]
 
 
Subtotal[1][0]
 
Subtotal[1][1]
 
Subtotal[1][2]
 
Subtotal[1][3]
 
 
 
 
Total[0]
 
Total[1]
 
Total[2]
 
Total[3]

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

Стилизация таблиц

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

Необходимые знания: Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS).
Цель: Научиться эффективно стилизовать HTML таблицы.

Типичная HTML таблица

Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

table> caption> A summary of the UK's most famous punk bands caption> thead> tr> th scope="col">Bandth> th scope="col">Year formedth> th scope="col">No. of Albumsth> th scope="col">Most famous songth> tr> thead> tbody> tr> th scope="row">Buzzcocksth> td>1976td> td>9td> td>Ever fallen in love (with someone you shouldn't've)td> tr> tr> th scope="row">The Clashth> td>1976td> td>6td> td>London Callingtd> tr> . some rows removed for brevity tr> th scope="row">The Stranglersth> td>1974td> td>17td> td>No More Heroestd> tr> tbody> tfoot> tr> th scope="row" colspan="2">Total albumsth> td colspan="2">77td> tr> tfoot> table>

Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как scope (en-US) , , (en-US), (en-US) и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.

Активное обучение: Стилизация таблицы

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

  1. В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
  2. Следующее, это создать новый файл style.css и сохранить его в той же папке вместе с другими файлами.
  3. Подключить CSS в HTML для этого разместить следующую строку в HTML внутри :

link href="style.css" rel="stylesheet" type="text/css" />

Отступы и разметка

Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш style.css файл:

/* spacing */ table  table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; > thead th:nth-child(1)  width: 30%; > thead th:nth-child(2)  width: 20%; > thead th:nth-child(3)  width: 15%; > thead th:nth-child(4)  width: 35%; > th, td  padding: 20px; >

Наиболее важные части следующие:

  • Свойство table-layout (en-US) со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed , размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ( :nth-child ) («Выберите n-ый дочерний элемент (en-US) в последовательности, внутри элемента (en-US)«) и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts. Мы также использовали width 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).
  • Свойство border-collapse (en-US) со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse; рамки схлопываются в одну и так выглядит намного лучше:
  • Мы установили border вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
  • Мы установили padding на элементах (en-US) и — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.

На этом этапе наша таблица выглядит уже гораздо лучше:

Немного простой типографики

Теперь мы ещё кое-что изменим.

Во-первых, мы пойдём и найдём на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный элемент и изменить объявление font-family на выбранный вами Google Fonts шрифт.

link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css" />

Затем добавьте следующий CSS в ваш style.css файл, ниже предыдущего кода:

/* typography */ html  font-family: "helvetica neue", helvetica, arial, sans-serif; > thead th, tfoot th  font-family: "Rock Salt", cursive; > th  letter-spacing: 2px; > td  letter-spacing: 1px; > tbody td  text-align: center; > tfoot th  text-align: right; >

Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:

  • Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов (en-US) и , который подходит нам по тематике панков.
  • Мы добавили немного letter-spacing в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.
  • Мы выравниваем по центру текст ячейках внутри (en-US) чтобы они совпадали с заголовками. По умолчанию у ячеек свойство text-align имеет значение left , а заголовки значение center , но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.
  • Мы выровняли заголовок справа внутри так чтобы он визуально ассоциировался с соответствующими ему данными.

В результате таблица выглядит немного аккуратнее:

Графика и цвета

И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.

Следующий шаг это добавить следующий CSS в ваш style.css файл в самом низу:

thead, tfoot < background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; >thead th, tfoot th, tfoot td

Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.

Мы добавили background-image в (en-US), и изменили color (en-US) для всего текста внутри header и footer на белый (и ещё text-shadow ) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.

Полосатая зебра

Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать полосы зебры — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш style.css файл:

tbody tr:nth-child(odd)  background-color: #ff33cc; > tbody tr:nth-child(even)  background-color: #e495e4; > tbody tr  background-image: url(noise.png); > table  background-color: #ff33cc; >
  • Ранее вы видели как :nth-child селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even , которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.
  • Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный .png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
  • И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child .

Этот взрыв цвета выглядит следующим образом:

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

Стилизация заголовка

Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл style.css :

caption  font-family: "Rock Salt", cursive; padding: 20px; font-style: italic; caption-side: bottom; color: #666; text-align: right; letter-spacing: 1px; >

Здесь нет ничего особенного, кроме свойства caption-side (en-US), которое имеет значение bottom . В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

Активное обучение: Стилизация вашей собственной таблицы

Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.

Стилизация таблицы быстрые советы

Короткий список наиболее полезных вещей рассмотренных выше:

  • Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
  • Используйте table-layout (en-US) : fixed для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину width для заголовков таблицы ( (en-US)).
  • Используйте border-collapse (en-US) : collapse , которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
  • Используйте (en-US), (en-US) и чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.
  • Используйте полоски зебры, чтобы облегчить чтение между строк.
  • Используйте text-align чтобы выровнять текст в (en-US) и для более аккуратного и удобного оформления.

Заключение

Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.

В этом блоке

  • Box model recap
  • Backgrounds
  • Borders
  • Стилизация таблиц
  • Advanced box effects
  • Creating fancy letterheaded paper (en-US)
  • A cool looking box (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

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

Публикации по этой теме:

Шпаргалка по работе с таблицами

Оформление таблицы с помощью псевдоклассов

CSS таблицы цен

Красивое оформление таблиц

Выравнивание текста в таблице с помощью CSS

1.7. HTML-таблицы

Поделиться:

Похожие записи

Как отрегулировать задний мост на уаз буханка

admin

Как проверить содержится ли символ в строке java

admin

Как сбросить аккаунт на телефоне

admin