Все свойства table html css. Применение свойства border
Многие веб мастера уверены, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли использовать таблицы CSS? Если да, то как?
Как создать таблицу CSS
Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению.
Основными элементами структуры являются строки. Строка определяется явно, а столбцы зависят от того, как заданы строки и ячейки.
Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.
Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS.
Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.
Table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption }
Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side:
#caption {caption-side: top} #caption {caption-side: bottom}
Несложно догадаться, как создать таблицу CSS опираясь на приведенный список. Вот пример таблицы.
#table {display: table;} .row {display: table-row;} .cell {display: table-cell;}
Если посмотреть на код HTML примера, то можно легко различить структуру таблицы (используются элементы div и span с классами и ID вместо table , td и tr).
Совсем небольшой код CSS представляет элементы div и span в виде таблицы.
В дополнение к выше приведенным свойствам модель таблицы CSS включает значение inline-table , которая определяет новую таблицу как и display: table , но в рамках контекста встроенного в HTML код формата.
Столбцы и их группировка
Так как ячейки таблицы являются потомками строк таблицы, то для формирования столбцов имеет смысл использовать некоторые свойства. Модель таблицы CSS позволяет применять следующие свойства для столбцов и их группировки:
- border — обычное свойство, пока свойство border-collapse не используется для элемента таблицы;
- background — обычное свойство, пока строка и ячейка имеют прозрачный фон;
- width — установка ширины столбца;
- visibility — если имеет значение collapse (единственное доступное значение), то ячейка столбца не будет выводиться (она объединяется с другими столбцами и ширина таблицы выравнивается).
Стек таблицы CSS
Различные элементы таблицы имеют разный уровень в стеке для обеспечения возможности использования разных фонов на разных слоях.
Данные слои можно посмотреть на представленном рисунке.
- таблица - самый нижний слой
- группа столбцов
- столбцы
- группа строк
- строки
- ячейки - самый верхний слой
Фон слоя будет виден только если выше лежащий слой имеет прозрачный фон.
Это отличный способ для вывода пустых ячеек действительно пустыми с помощью использования прозрачного фона для них, через который будет видно строку, столбец или таблицу.
Алгоритм шаблона таблицы
Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов . Алгоритм выбирается с помощью свойства table-layout и двух значений:
- fixed (фиксированная) — ширина шаблона определяется не содержанием, а установкой ширины таблицы, ячеек, рамок и расстоянием между ячейками;
- auto (автоматическая)— ширина таблицы устанавливается исходя из ширины столбцов и рамок.
Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML.
Если вы явно определяете ширину таблицы, то следует использовать фиксированную модель расчета ширины.
По умолчанию высота ячейки устанавливается минимально необходимой для вывода содержания. Но вы можете явно определить высоту ячейки. Все ячейки в строке будут иметь высоту ячейки с максимальным значением.
Свойство vertical-align определяет выравнивание содержания в строке
- baseline
- bottom
- middle
- sub, super, text-top, text-bottom, <длина>, <процент>
Последняя группа значений применяется не для ячеек, а для текста в них. Ячейки в данном случае будут выравниваться в соответствии со значением baseline .
Рамки таблицы CSS
Есть три интересных свойства для рамок таблиц:
- border-collapse — может иметь значения collapse , separate , или inherit
- border-spacing — может иметь значения <расстояние_по_горизонтали>, <расстояние_по_вертикали>, или inherit . Определяет дистанцию между рамками ячеек.
- empty-cells — может иметь значения show , hide , или inherit . Если ячейка пустая или имеет свойство visibility: hidden , то содержание не будет выводиться по умолчанию. Установка свойства empty-cells: show приведет к выводу фона и рамки для пустой ячейки.
Нужно ли использовать таблицы CSS?
Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа.
Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов div и кода CSS, то выявляются следующие недостатки таблиц:
- Дополнительное кодирование — таблицы HTML требуют дополнительного кодирования структуры в сравнении с элементами div . Но и таблицы CSS требуют использования дополнительных классов и идентификаторов.
- Жесткая структура — таблицы HTML очень жестко привязаны к содержанию . Порядок ячеек должен быть таким, каким он будет выводиться. Но такое же ограничение накладывается и на таблицы CSS/
- Вывод в браузерах — браузеры выполняют несколько проходов по структуре HTML таблиц. Но и для CSS таблиц ситуация будет аналогичной.
В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах.
CSS таблицы являются более семантическим решением, так как имеется четкое разделение структуры данных и представления внешнего вида.
Заключение
Таблицы CSS достаточно просто освоить и использовать. Но они не имеют явных преимуществ перед таблицами HTML, за исключением более семантического кода.
Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах?
Привет, друзья!
Каждый, кому приходилось вести блог, наверняка сталкивался с таблицами. Как их создавать рассказывать не буду. А вот про красивую «разлиновку» поговорим.
Оформлять будем, конечно же, с помощью CSS. Научимся делать «зебру» - не только горизонтальную, но и вертикальную. Поехали!
Пример красивой таблицы
Как видим, оформление коснулось всех основных аспектов:
- Заголовки отличаются от остальных строк.
- Строки чередуются цветом для более удобного восприятия.
- В столбцах так же чередуется цвет. Это помогает не потерять нужный столбец при движении вверх/вниз.
- Если навести мышку на строку, та подсветится. Это удобно для громоздких таблиц.
Что же, основые моменты определили, давайте пытаться реализовать.
Структура не полная, HTML предусматривает дополнительные теги, но решение, показанное на картинка, покрывает пожалуй более 99% всех случаев.
Итак, у нас есть таблица table, заголовок thead и тело tbody. В свою очередь thead и tbody содержат строки - tr. Строки разбиваются на ячейки - th и td. Формально, для ячейки подходят оба тега, но семантически верно для заголовков использовать th, для остального - td.
Прежде, чем продолжить, давайте условимся, что для такой полосатой таблицы будем использовать отдельный класс .zebra
Исходный код таблицы:
Язык | Переводы | |||
---|---|---|---|---|
русский | один | два | три | четыре |
английский | one | two | three | four |
немецкий | eins | zwei | drei | vier |
Пожалуй, остановлюсь на тегах colgroup и col . Теги нужны для описания стилей колонок таблицы. Формально, колонок нет - есть строки и ячейки. Из-за этого теги и не используются. Но в нашем случае они необходимы для того, чтобы не прописывать вручную классы каждой ячейке.
Оформление заголовка
Настало время небольшой CSS-магии. Определим стили для ячеек-заголовков. Пусть они будут фиолетовые, с жирным шрифтом и текстом, выровненным по левому краю:
Table.zebra thead th { background-color: rgba(204, 204, 255, 0.4); font-weight: bold; text-align: left; }
Возможно, кто-то спросит, почему я задал цвет не в виде rgb() или более привычного #CCCCFF? Всё просто: без полупрозрачности цвета будут перекрываться и получится совсем не то, что нам нужно. Просто посмотрте на рисунок:
Чередование фона строк
Раньше (да и сейчас порой) можно было встретить в HTML-коде такое:
Программно подставляется соответствующий класс для чётной и нечётной строк. Представьте, что каждую строку нужно «помечать» соответствующим образом. Дичь? А то! И ладно это формирует скрипт, но представьте, что таблица большая, строки добавляются/удаляются вручную. Смекаете, куда клоню? При добавлении новой строки в середину таблицы всем остальным за ней придётся вручную менять название класса, чтобы не сбить чересполосицу.
К счастью, есть CSS, благодаря которому это делается не просто, а очень просто. Делаем!
/* нечётные строки таблицы - красные */ table.zebra tbody tr:nth-child(odd) { background-color:rgba(255, 0, 0, 0.2); } /* чётные строки - зелёные */ table.zebra tbody tr:nth-child(even) { background-color:rgba(0, 255, 0, 0.2); }
И всё. Изи)
Главное, учтите, что нумерация начинается с нуля, поэтому к первой строке таблицы будет применён стиль для чётной строки even .
Чередование фона столбцов
Здесь всё аналогично, только «чередовашки» описываем для элементов col:
Table.zebra col:nth-child(odd) { background-color:rgba(255, 255, 255, 0.2); } table.zebra col:nth-child(even) { background-color:rgba(0, 0, 0, 0.1); }
Чётные строки будут чёрные, нечётные - белые. Не забываем про полупрозрачность!
Выделение строки при наведении мышкой
Осталось самое лёгкое. Когда курсор находится над любой строкой, просто заливаем её жёлтым. Главное помнить про полупрозрачность, чтобы вертикальная разлиновка была видна.
Table.zebra tbody tr:hover { background-color:rgba(255, 255, 0, 0.2); }
Вот и всё. Окончательный вариант . Для сохранения файла себе просто нажмите Ctrl-S на открывшейся странице. Там ничего не подсасывается, не нужны сторонние библиотеки и прочее, только голый HTML со стилями.
PS: «Нафига это нужно?» - спросит пытливый читатель. В самом деле, для трех строк и пяти столбцов не много ли чести? Но представьте, что строк тридцать, плюс десяток столбцов, и подобные труды уже не кажутся излишеством. В конце концов, посмотрите таблицы в phpMyAdmin. Очевидно, что без такой раскраски работать было бы крайне неудобно.
Дополнение
Вариант для тех, кого полностью устраивает функциональность редактора CMS. Качаем .
Отличия: стили применяются к таблицам (тег table ), «вертикальная» линовка вынесена на th /td . Но! Редактор CMS должен генерировать thead и tbody . Это означает, что colgroup /col более не нужны, но не отменяет необходимость «правильного кода» со стороны движка.
Можно усложнить ещё немного, предположить, что первая строка всегда является заголовком, когда нужно убрать из css упоминания о tbody/thead, а для первой строки определить:
Table tr:first-child
Table thead tr
В общем, изгаляться можно всяко, только потребуется больше кода.
А в этой статье я расскажу об их оформлении с помощью CSS. Для форматирования таблиц каскадные стили используют перечисленные ниже свойства.
width и height
Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера Table {width: 450px; height: 80%;} Указывает, где будет размещён заголовок таблицы, описанный тегом Эксклюзивно для обозревателя Firefox доступны значения left
(заголовок слева) и right
(справа от таблицы), но другие браузеры их не понимают. Table {caption-side: top;} Помогает избежать ситуаций, когда границы ячеек образуют двойные рамки. На рисунке ниже показан как раз такой случай. Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate;
даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse;
(результат показан на рисунке ниже). Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе - по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}
. Table {
border: 4px double #FCA360;
border-collapse: separate;
border-spacing: 10px 20px;
}
td {
padding: 3px;
border: 1px solid #FCA360;
} Задаёт таблице следующее оформление: Указывает, будет ли отображаться фон и границы ячейки, если она пуста. Значение у свойства может быть одно из двух: Указывает браузеру, как определять ширину ячеек таблицы, основываясь на их содержимом. Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height
) и шириной (width
). Помня это, оформим несложную таблицу, частично прокомментировав код.
В браузере таблица будет выглядеть, как показано ниже. width: 50%;
Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера
, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера. caption-side: bottom;
Размещаем заголовок снизу, под таблицей. border: 4px solid #006400;
Задаём таблице цветную рамку толщиной 4 пикселя. border-collapse: collapse;
Объединяем границы ячеек. table-layout: fixed;
Настраиваем способ определения браузером ширины таблицы. font-size: 13px;
Задаём размер шрифта заглавных ячеек. font-weight: bold;
Делаем текст внутри них жирным. background: #ADFF2F;
Устанавливаем цвет фона ячеек. border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;
Настраиваем верхние и нижние рамки. color: #039;
Определяем цвет текста. padding: 8px;
Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям. Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу. Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки. Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы
задаются свойством 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 вы можете прочитать . По умолчанию ширина и высота таблицы
определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки). Ширина таблицы и столбцов
задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится. Ширину таблицы и столбцов обычно задают в px или % , например: Table {width: 600px;}
th {width: 20%;}
td:first-child {width: 30%;}
Высота таблицы
не задается. Высотой рядов
таблицы можно управлять, добавив верхний и нижний padding для элементов Th, td {padding: 10px 15px;}
По умолчанию фон таблицы
и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать: Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега с
помощью тега Можно задать фон для любого количества столбцов;
с
помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы); с
помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы. Подробнее про CSS-селекторы вы сможете прочитать . Добавить заголовок в таблицу можно с помощью тега Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется. Синтаксис
Table {border-collapse: collapse;}
С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется. Синтаксис
Table {border-collapse: separate; border-spacing: 10px 20px;}
table {border-collapse: separate; border-spacing: 10px;}
Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек
Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется. Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется. Синтаксис
Table {table-layout: fixed;}
Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами 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;}
Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы. Th {
font-weight: normal;
border-bottom: 2px solid #6678b1;
border-right: 30px solid #fff;
border-left: 30px solid #fff;
color: #039;
padding: 8px 2px;
}
td {
border-right: 30px solid #fff;
border-left: 30px solid #fff;
color: #669;
padding: 12px 2px;
}
Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя. Th {
font-size: 13px;
font-weight: normal;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
padding: 8px;
}
td {
background: #e8edff;
border-bottom: 1px solid #fff;
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;
}
Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы. 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;}
Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект: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 #fff;
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 #fff;
padding: 20px;
}
td {
color: #669;
border-right: 1px dashed #6cf;
padding: 10px 20px;
}
Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы. Jpg") no-repeat;
background-position: 100% 55px;
}
th {
font-weight: normal;
color: #339;
padding: 10px 12px;
}
td {
background: url("https://сайт/images/back..png");
background: transparent;
}
. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px
) и проценты (%
). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.
caption-side
border-collapse
border-spacing
empty-cells
table-layout
Пример оформления таблицы
Цены 2014
2015 2016
Хлеб 16
18 21
Сахар 35
44 50
Соль 8
8,50 9
Форматирование таблиц
1. Границы таблицы border
2. Как задать ширину и высоту таблицы
и . Фиксировать высоту с помощью свойства height не рекомендуется. 3. Как задать фон таблицы
заливка ,
,
.4. Столбцы таблицы
. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:
5. Как добавить таблице заголовок
caption {
caption-side: bottom;
text-align: right;
padding: 10px 0;
font-size: 14px;
}
Рис. 2. Пример отображения заголовка под таблицей
...
Company
Q1
Q2
Q3
Q4
6. Как убрать промежуток между рамками ячеек
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек
7. Как увеличить промежуток между рамками ячеек
8. Как скрыть пустые ячейки таблицы
table {
border: 1px solid #69c;
border-collapse: separate;
empty-cells: hide;
}
th, td {border: 2px solid #69c;}
Рис. 5. Пример скрытия пустой ячейки таблицы
Company
Q1
Q2
Q3
Microsoft
20.3
30.5
Google
50.2
40.63
45.23
9. Компоновка макета таблицы с помощью свойства table-layout
10. Лучшие макеты таблиц
1. Горизонтальный минимализм
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;}
Employee Salary Bonus Supervisor Stephen C. Cox $300 $50 Bob Josephin Tan $150 - Annie Joyce Ming $200 $35 Andy James A. Pentel $175 $25 Annie 2. Вертикальный минимализм
3. «Коробочный» стиль
4. Горизонтальная зебра
5. Газетный стиль
6. Фон таблицы