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

Управляйте данными с помощью фильтров

Позвольте пользователям управлять данными, представленными в таблице. Фильтрация данных помогает пользователям находить то, что они ищут, получать различную информацию и проводить сравнения.

Базовые фильтры: Разрешите пользователям применять предустановленные параметры к некоторым наборам данных. Эта функция универсальна и подходит для большинства таблиц данных.

Пример базового фильтра (таблица из UI Prep)

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

Пример комплексного фильтра (таблица из UI Prep)

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML Цвет
Цвет
RGB
HEX
HSL

HTML с CSSHTML Ссылки
Ссылки
Ссылки цветные
Ссылки закладки

HTML Изображение
Изображение
Изображение карта
Изображение фон
Элемент картинки

HTML ТаблицыHTML Списки
Списки
Неупорядоченный список
Упорядоченный список
Другие списки

HTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML

Вопросы от чайников

Как видно из приведённых примеров, построить таблицу в Экселе очень просто; в заключение будут даны ответы на самые часто встречающиеся вопросы от начинающих пользователей.

Как добавить столбец или строку?

Чтобы добавить строку или столбец в автоматически созданной таблице Excel, следует:

Для столбца — выделить заголовок правой клавишей мыши и выбрать в открывшемся меню опцию «Столбцы справа/слева».

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

Если таблица создавалась вручную, пользователю достаточно будет выделить новый диапазон и, снова раскрыв меню «Границы», придать ему тот же вид, что у ранее созданных. Перенос данных в этом случае осуществляется посредством копирования и вставки.

Как посчитать сумму в таблице?

Чтобы найти сумму данных в таблице Эксель, нужно:

Выделить соответствующий столбец, перейти на вкладку «Главная» и нажать на кнопку «Автосумма».

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

Порядок вычисления суммы в таблицах Excel, созданных автоматически, ничем не отличается от описанного выше.

Как отсортировать данные в таблице?

Для автоматической сортировки сведений, содержащихся в таблице Эксель, следует:

Выделить мышью столбец, открыть выпадающее меню «Сортировка».

Далее выбрать один из простых вариантов обработки данных (в возрастающем или убывающем порядке) или, включив «Настраиваемую сортировку», задать в новом окне параметры выборки: номер столбца.

И порядок: прямой или обратный.

Важно: в таблице Excel, созданной автоматически, юзер сможет вызвать сортировку непосредственно в контекстных меню столбцов

Как вставить изображение в таблицу?

Чтобы добавить картинку в таблицу Эксель, потребуется перейти на вкладку «Вставка» и кликнуть по кнопке «Рисунки», после чего выбрать требуемый файл.

Пользователь, решивший создать таблицу своими силами, сможет отрегулировать размер, положение и другие параметры рисунка, выделив его щелчком мыши и автоматически перейдя на вкладку «Формат».

Колонтитулы и подпись в HTML таблицах

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

Делается это при помощи обвертки строк <tr> выбранной части таблицы тегами. <thead> определяет область верхнего колонтитула, <tfoot> — область нижнего колонтитулы, <tbody> — основную часть таблицы.

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

Правильный порядок размещения тегов областей в коде HTML таблицы <table> следующий: вначале верхний колонтитул <thead>, за ним нижний колонтитул <tfoot>, после них основная часть <tbody>. При этом на странице основная часть будет выведена между колонтитулами.

По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption>.

Подпись <caption>, при использовании, ставится сразу после открывающего тега <table>.

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика	SUTA 09H 6R	SUTA 09HR6R	SUTA 15H 5R
Наличие	+	+	+
Мощность двигателя	0,9 (90 л.с.)	0,9 (90 л.с.)	1,5 (90 л.с.)
Топливо	бензин	бензин	дизель
Норма токсичности	Евро-6	Евро-6	Евро-5

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

Знакомство с семантической вёрсткой

Семантический подход к вёрстке подразумевает использование HTML-тегов в соответствии с их семантикой (предназначением), а его суть заключается в верности выбора тегов и их взаимного расположения.

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

Семантический подход — противоположность визуальному, при котором важно только то, как HTML-страница выглядит. Почему семантика так важна

Почему семантика так важна

Она повышает доступность контента. Тогда его лучше понимают:

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

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

Так, можно использовать для всех них тег <div>, но он не обладает семантикой, никак не обозначает смысл своего содержимого. Поэтому мы применяем для заголовков теги H1… H6, для таблицы — <table>, <caption>, <thead>, <tbody>, <tfoot>, <th>. И так далее.

Для оформления страниц при семантической вёрстке применяют каскадные таблицы стилей (CSS).

Рассмотрим, какие теги отвечают за вёрстку таблиц, когда и зачем нужен каждый.

Следите за числами

Не все числа одинаковы. Я не имею в виду π (Пи) и ∞ (хотя упоминаю о них на вечеринках), а говорю об отображении цифр, разделяющихся на минускульные или маюскульные, и на пропорциональные или табличные.

Минускульные и маюскульные

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

Разница между пропорциональными и табличными цифрами не столь очевидна:

Пропорциональные и табличные цифры

Пропорциональные цифры созданы, чтобы передавать оттенок — соответствовать общим размерам и отступам — гарнитуры шрифта. Табличные цифры соразмерны друг с другом, что позволяет выравнивать колонки с числами. Хотя разница на примере одной-двух строк не столь очевидна, использование табличных цифр позволяет легче просматривать большие таблицы и снижать вероятность ошибок прочтения.

Техническое замечание о табличных маюскульных цифрах

На этапе дизайна стоит убедиться, что используемые цифры вам подходят (табличное и маюскульное выравнивание обычно выключено по умолчанию). Продукты Adobe включают панель «opentype», при помощи которой цифрам задаётся правильная настройка. Чтобы включить соответствующее свойство в CSS, нужно разобраться в слегка запутанном синтаксисе. Как бы то ни было, несколько запросов к гуглу наставят вас на путь истинный.

Теперь плохие новости: табличные маюскульные цифры доступны не для всех шрифтовых гарнитур. Гарнитуры, которые их включают, обычно дороги. Есть несколько исключений: например, прекрасный Work Sans — бесплатный шрифт с табличными маюскульными цифрами.

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

Оформление границ таблицы CSS

У нас обычная таблица, которая имеет одну заглавную строку «<th>» и две обычные строки «<td>«, два столбца — в HTML такая таблица имеет следующий код:

<table>
<tr>
  <th colspan="2">Заголовок таблицы</th>
</tr>
  <tr>
    <td>Содержание ячейки 1</td>
    <td>Содержание ячейки 2</td>
  </tr>
   <tr>
    <td>Содержание ячейки 3</td>
    <td>Содержание ячейки 4</td>
  </tr>
</table>

Все границы таблицы оформляются посредством тэга «border«, поэтому в CSS прописываем следующее:

table, th, td {
border 1px solid grey;
}

Где:

• table — задаёт параметры к всей таблице
• tr — обозначает ряд ячеек
• th — обозначает свойства заглавной ячейки таблицы, текст в которой по умолчанию выровнен по центру и имеет жирный шрифт.
• td — обозначает другие ячейки таблицы, текст в которых по умолчанию выровнен по левому краю и имеет обычный шрифт.
• border — тэг для оформления границ.
• 1px — задаёт параметры толщины линии в пикселях.
• solid — задаёт параметры типа линий.
• grey — параметр цвета, в данном случае серый. Можно задавать любые цвета.

Обратите внимание, что в данном примере у таблицы двойные границы, это связано с тем, что есть границы, как у самой таблицы »

table {
border-collapse collapse;
}

table, th, td {
border 1px solid grey;
}

Объединение ячеек в таблице HTML

В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега
, определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут colspan=»2″

Начните с выравнивания

Выравнивание простого текста или данных в таблице сразу бросается в глаза. Часто рядовой пользователь ставит выравнивание по своему вкусу: кто-то всегда и все выравнивает по центру, кто-то — по левому краю, а кто-то просто по ширине. Между тем существуют четкие правила “хорошего тона”, выработанные на основе наилучшего восприятия информации:

• цифры выравниваем по правому краю;
• текст выравниваем по левому краю;
• заголовки выравниваем по той же стороне, что и данные под ними (если текст — по левому краю, если цифры — по правому);
• выравнивание по центру не используем или используем только в качестве исключения.

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

Начните с выравнивания

Выравнивание простого текста или данных в таблице сразу бросается в глаза. Часто рядовой пользователь ставит выравнивание по своему вкусу: кто-то всегда и все выравнивает по центру, кто-то — по левому краю, а кто-то просто по ширине. Между тем существуют четкие правила “хорошего тона”, выработанные на основе наилучшего восприятия информации:

• цифры выравниваем по правому краю;
• текст выравниваем по левому краю;
• заголовки выравниваем по той же стороне, что и данные под ними (если текст — по левому краю, если цифры — по правому);
• выравнивание по центру не используем или используем только в качестве исключения.

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

Эффект зебры

Для создания эффекта зебры используется CSS3 для выделения четных строк в элементе :

.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

Но выше приведенный селектор CSS3 не поддерживается в старых браузерах. А вот как можно выбрать и поменять стиль для нужных строк во всех всех браузерах:

$(".zebra tr:even").addClass('alternate');

Одна строчка кода jQuery. Потребуется также класс для замены:

.alternate {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

Границы и фон

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

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

Таблицы должны быть монохромными, иначе у пользователей могут возникнуть резонные вопросы: “Что обозначает это разделение и стоит ли обращать на него внимание?” Кроме того, если вашу таблицу решат распечатать в ЧБ, вся ваша цветосемантика пропадет

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup>.

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

Теги <col>и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.

Оба тега могут определять стили для одной или нескольких колонок. Атрибут span=»число«, указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.

Теги <col> и <colgroup> похожи друг на друга, однако тег <colgroup> позволяет использование вложенных тегов <col>, таким образом можно задать стили группе колонок через <colgroup> и конкретной колонке внутри группы через элемент <col> (см. пример ниже).

Если внутри <colgroup> есть вложенные теги <col>, то атрибут span у тега <colgroup> не ставится, а количество колонок на которые влияет тег определяется вложенными <col> элементами.

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENSE 2E3C AL A	Характеристика
1.5 (90 л.с.)	1.2 (115 л.с.)	1.5 (90 л.с.)	Мощность двигателя
дизель	бензин	дизель	Топливо
АКП6 (EDC)	АКП6 (EDC)	АКП6 (EDC)	Трансмиссия

Исходный код таблицы HTML c <col> и <colgroup>

Красивые таблицы в Excel

На прошлой неделе меня несколько раз спросили, как сделать, чтобы было «красиво в Excel». Поскольку отвертеться от рассказа от маленьких хитростей обычно не получается, пришлось писать статью. Как правило, под сделать красиво в Excel, подразумевается красивое оформление на листе Excel, добавление красивых элементов (диаграммы, графики, таблицы). Спрашивают как закрасить нужное и скрыть лишнее и конечно же это как можно быстрее и бесплатно. Со всеми коллегами согласен. Пишу:

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

Как сделать красиво в Excel. Диаграммы

Чтобы данные легко воспринимались на глаз, сделать не так сложно, а в основе аналитике лежит аналитика глазом. Т.е. если вы построите график именно в таком разрезе, чтобы сразу видно в чем загвоздка. К примеру, как определить растут или увеличиваются переменные затраты?

Хорошие статьи по графикам можно прочитать здесь и здесь .

Линия тренда

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

Подробно о линии тренда читайте здесь

Формат по образцу

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

Вот тут хорошая инструкция

Скрыть строки

Как на первом картинке удалены все строки? Это простой секрет. Мне так, самом деле больше нравиться — так глаз не отвлекается на лишнее, как в случае с вариантом 1 лист — 1 диаграмма.

Как делать — нажимаете сочетание клавиш ctrl+shift+стрелка вправо (это выделит все столбцы до конца диапазона вправо), нажимаете правой кнопкой мыши — Скрыть. Столбцы убрали.

Тоже самое со строками, только жмем ctrl+shift+стрелка вниз

Еще немного об этом

Сделать все белым

Я иногда перед начало работы делаю весь лист белым, так смотрится куда презентабельнее, если файл будете показывать в Excel. Жмем выделить все ячейки

И теперь делаем заливку ячеек листа белым цветом

Так лучше, не правда ли?

Не забывайте про Условное форматирование, температурное форматирование и группировка строк

Изменение фона ячейки при наведении курсора

Как видно в предыдущей таблице, при наведении курсора на определенную ячейку, меняется ее фон и цвет текста. Это можно провернуть несколькими способами. В данном случае добавлен псевдокласс hower, который назначен классам отвечающим за ячейки:

.tab8td:hover {
background: #f3bd48; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */}

.nizleft:hover {
background: #f3bd48; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */}

.nizright:hover {
background: #f3bd48; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */}

Также для этих целей можно использовать два события: onMouseOver — отвечает за изменение содержимого, при наведении на него курсором мышки и onMouseOut — отвечает за вид содержимого, если курсор мышки не наведен на него. Которые задаются без CSS, напрямую в HTML-код. Например: 

<td bgcolor=’pink’ onmouseover=»this.style.backgroundColor=’#CC6633′;»onmouseout=»this.style.backgroundColor=’pink’ «>

Наведите пожалуйста курсор мышки на данную ячейку

К сожалению не все браузеры правильно отобразят данный результат, однако эти способы наиболее популярные и без проблем работают в популярных браузерах.

Далее рассмотрим блоки, блочные элементы и их свойства: Блоки в CSS

Важно помнить!

Теги <thead> и <tfoot> нужны не всегда. Бывают таблицы без шапки и подвала.

Если нет смысла группировать основную часть таблицы, то можно обойтись и без тега <tbody>, но мы рекомендуем не делать так. Тег даёт больше контроля над структурой таблицы и стилизацией, а также приучает действовать последовательно.

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

Пример:

1	Мавзалеев И. В.	10.09.1992
2	Киреева А. Ю.	02.05.1996
3	Корнеев И. Ю.	09.10.1990
4	Тресков В. А.	25.03.1993
5	Ибрагимов А. Е.	15.10.1994
6	Борисенко Д. С.	10.10.1991

В таблице выше шесть строк, каждая из которых содержит три ячейки. Здесь нет важных для смысла признаков, по которым можно сгруппировать содержимое таблицы. Поэтому будет достаточно тега <caption> (придумаем его и скроем) и тега <tbody>, а вот теги <thead> и <tfoot> можно опустить.

Другие настройки CSS для оформления таблиц

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

Настройка размеров таблицы CSS

table {
height 200px;
width50%;
}

• height — высота таблицы, в данном случае задаётся в пикселях (200px)
• width — ширина таблицы, в данном случае задаётся в процентах (50% от ширины экрана)

Настройка отступов в таблице CSS

К таблице можно задать отступы, как внешние, чтобы другие элементы страницы не «прилипали» к таблице, так и внутренние отступы, чтобы текст и другие элементы в таблице не сливались с границами таблицы:

table, th, td {
padding 4px;
margin 6px;

Где:

• padding — внутренние отступы таблицы и ячеек, задаются в пикселях (px)
• margin — внешние отступы от таблицы, задаются в пикселях (px)

Стоит отметить, что можно присвоить имя определённой ячейке (<th id=»cell_name»>) и задать параметры отступов по отношению к ней.

Выравнивание текста в таблице CSS

Можно применять настройки выравнивания ко всем типам ячеек в таблицах. В заглавных ячейках «<th>» текст по умолчанию выравнивается по центру, а обычных ячейках «<td>» по левому краю, как видно из примеров выше.

Выравнивание текста по горизонтали

Горизонтальное выравнивание в ячейках осуществляется при помощи тэга «text-align«:

th {
text-align left;
}

Где «left» — выравнивание по левому краю ячейки, «right» — выравнивание по правому краю ячейки, «center» — выравнивание текста по центру ячейки.

Выравнивание текста по вертикали

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

td, td {
vertical-align bottom;
height 50px;
}

• Где «bottom» — выравнивание по нижнему краю ячейки, «top» — выравнивание по верхнему краю ячеек таблицы, «middle» — вертикальное выравнивание по центру (установлено по умолчанию ко всей таблице).
• В данном примере специально задана высота ячейкам «50px«, чтобы наглядно было видно вертикальное выравнивание.

| valign=»top» width=»50%» |

Таблица оформленная через CSS

Настройка цвета таблицы CSS

table {
background grey;
}

В этом случае вся таблица будет окрашена в серый цвет.Цвет таблицы, как и других элементов на странице, задаётся тэгом «background«, где цвет можно обозначить английскими словами «blue» — синий, «black» — чёрный, «red» — красный и т.д. Также возможно задать HTML кодом, например #F9FCBC. Фоном в таблице может служить какой либо рисунок или узор — об этом подробно можно узнать в статье Настройка фона CSS.

Для красивого оформления таблицы в HTML можно присваивать рядам ячеек определённое имя (<tr id=»row1″>):

<table>
 <tr>
   <th colspan="2">Заголовок таблицы</th>
 </tr>
  <tr id="row">
    <td>Содержание ячейки 1</td>
    <td>Содержание ячейки 2</td>
  </tr>
   <tr>
    <td>Содержание ячейки 3</td>
    <td>Содержание ячейки 4</td>
  </tr>
   <tr id="row">
    <td>Содержание ячейки 5</td>
    <td>Содержание ячейки 6</td>
  </tr>
</table>

и присвоить этому имени свой цвет, таким образом в CSS прописываем:

table, th, td {
border 1px solid grey;
padding 4px;
border-collapse collapse;
}

th {
background #CBCBCB;
text-decoration underline;
}

#row {
background #FFFFEE;
}

Выравнивание текста

Текст можно выровнять как в таблице в целом, так и в каждой ее ячейке. По умолчанию текст выравнивается по левой стороне. Свойство отвечающее за горизонтальное выравнивание текста — text-align, имеет следующие значения: left — выравнивание по левому краю, center — выравнивание по центру, right — выравнивание по правому краю. За вертикальное выравнивание отвечает свойство vertical-align. Данное свойство имеет такие значения: top — выравнивание по верхнему краю, bottom — выравнивание по нижнему краю, middle — выравнивание по середине.

td {text-align:right; height:70px; vertical-align:bottom;}

Ячейка имеет высоту 70 пикселе, содержимой данной ячейки горизонтально выравнивается по правому краю и вертикально — по нижнему краю.