Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
Вредоносное ПО (malware) - это назойливые или опасные программы,...
Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.
Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.
Форматирование таблиц
1. Границы таблицы border
Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством 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 вы можете прочитать .
2. Как задать ширину и высоту таблицы
По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).
Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.
Ширину таблицы и столбцов обычно задают в px или % , например:
Table {width: 600px;} th {width: 20%;} td:first-child {width: 30%;}
Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов
Th, td {padding: 10px 15px;}
3. Как задать фон таблицы
По умолчанию фон таблицы
и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:
заливка ,
,
.
4. Столбцы таблицы
Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега
с помощью тега
Можно задать фон для любого количества столбцов;
с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.
Подробнее про CSS-селекторы вы сможете прочитать .
5. Как добавить таблице заголовок
Добавить заголовок в таблицу можно с помощью тега
| Company | Q1 | Q2 | Q3 | Q4 |
|---|
Рис. 2. Пример отображения заголовка под таблицей
6. Как убрать промежуток между рамками ячеек
Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.
Синтаксис
Table {border-collapse: collapse;}
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек
7. Как увеличить промежуток между рамками ячеек
С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.
Синтаксис
Table {border-collapse: separate; border-spacing: 10px 20px;}
table {border-collapse: separate; border-spacing: 10px;}
Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек
8. Как скрыть пустые ячейки таблицы
Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.
| Company | Q1 | Q2 | Q3 |
|---|---|---|---|
| Microsoft | 20.3 | 30.5 | |
| 50.2 | 40.63 | 45.23 |
Рис. 5. Пример скрытия пустой ячейки таблицы
9. Компоновка макета таблицы с помощью свойства table-layout
Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.
Синтаксис
Table {table-layout: fixed;}
10. Лучшие макеты таблиц
1. Горизонтальный минимализм
Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .
| 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 |
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами 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;}
2. Вертикальный минимализм
Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.
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; }
3. «Коробочный» стиль
Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.
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; }
4. Горизонтальная зебра
Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.
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;}
5. Газетный стиль
Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект: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; }
6. Фон таблицы
Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.
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; }
Вконтакте
Одноклассники
В приведённом ниже примере образец таблицы максимально урезан, чтобы упростить структуру, пока вы изучаете принципы функционирования таблиц. Однако существуют и другие табличные элементы, а также атрибуты с более сложным семантическим описанием, повышающие доступность табличных данных для людей с ограниченными возможностями. Версия этой же таблицы с подробной разметкой выглядит следующим образом:
| Блюда | Калории | Жиры (г) |
|---|---|---|
| Куриный бульон | 120 | 2 |
| Салат Цезарь | 400 | 26 |
Результат на странице:
Элементы группы строк .
Строки или группы строк можно охарактеризовать как ячейки, относящиеся к одному заголовку, нижнему колонтитулу или к основной части таблицы, с помощью таких элементов как thead, tfoot и tbody, соответственно. Некоторые пользовательские агенты (синоним устройств просмотра) могут повторять строку заголовка и нижнего колонтитула таблицы на каждой странице документа. С помощью этих элементов разработчики также могут применять стили к различным частям таблицы.
Элементы группы столбцов
.
Столбцы могут быть определены с помощью элемента col или сгруппированы с помощью элемента colgroup. Их используют, если к данным в столбцах необходимо добавить определенный семантический контекст, также они могут пригодиться для быстрого подсчета ширины таблицы. Обратите внимание: в этих элементах нет контента, они просто описывают столбцы до того, как начинаются сами данные таблицы.
Специальные возможности
.
Такие элементы специальных возможностей, как подписи и сводки, предоставляют описание содержимого таблицы. Атрибуты scope и headers, предназначены для однозначного соотнесения заголовков и соответствующих им данных таблицы. Мы обсудим их позднее в этой главе.
В задачи данной книги не входит исчерпывающее исследование расширенных элементов таблиц, но если вам предстоит работать с объемными таблицами, стоит изучить эти вопросы самостоятельно. Подробную информацию вы найдете на сайте консорциума Всемирной паутины (www.w3.org/TR/html5).
ПРИМЕЧАНИЕ:
Согласно спецификации HTML5, таблица должна содержать «в следующем порядке: необязательный элемент caption, за которым могут располагаться несколько (или ни одного) элементов colgroup, далее необязательный элемент thead, затем необязательный элемент tfoot, после чего следуют несколько (или ни одного) элементов tbody или один или несколько элементов tr, далее необязательный элемент tfoot (но в общей сложности может быть только один дочерний элемент tfoot)».
Скачать пример описанных выше расширенных элементов таблицы на готовой странице в формате html:
содержит строки, который представлены элементом tr . А каждая строка между тегамиСоздадим простейшую таблицу:
| Модель | Компания | Цена |
| Nexus 6P | Huawei | 49000 |
| iPhone 6S PLus | Apple | 62000 |
| Lumia 950 XL | Microsoft | 35000 |
Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.
При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым таблицы. Разделения заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead , tfoot и tbody . Для их применения изменим таблицу следующим образом:
| Модель | Компания | Цена |
|---|---|---|
| Nexus 6P | Huawei | 49000 |
| iPhone 6S PLus | Apple | 62000 |
| Lumia 950 XL | Microsoft | 35000 |
| Информация по состоянию на 17 марта | ||
В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td , а th . Элемент th выделяет заголовок жирным. А все остальные строки заключаются в tbody
Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.
Кроме собственно заголовоков столбцов с помощью элемента caption мы можем задать общий заголовок для таблицы.
Также стоит отметить, что футер таблицы содержит только один столбец, который раздвигается по ширине трех столбцов с помощью атрибута colspan="3" .
Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы можем раздвигать ячейку на определенное количество строк. Например:
| 1 | 2 | 3 |
| 4 | 5 | |
| 6 | 7 | |
The HTML
| создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов | создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги | , расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек | должно быть равно количеству пар ячеек | . Для элемента доступны атрибуты colspan , rowspan , headers .
5. Как добавить подпись (заголовок) к таблицеСоздает подпись таблицы. Добавляется непосредственно после тега 6. Группирование строк и столбцов таблицыСоздает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов 7. Группировка разделов таблицыЭлемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами | и
для указания каждой части таблицы.
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Атрибут | Описание, принимаемое значение | |||
|---|---|---|---|---|
| colspan | Количество ячеек в строке для объединения по горизонтали. | |
||
| headers | Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров. | ... | ... | |
| rowspan | Количество ячеек в столбце для объединения по вертикали. | Возможные значения: число от 1 до 999. |
||
| span | Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1. Принимаемые значения: любое целое положительное число. |
|||
10. Пример создания таблицы
Рис. 4. Создание меню ресторана с помощью HTML-таблицы
Разметка HTML
| Кухня | Холодные блюда | Горячие блюда | Десерты | ||
|---|---|---|---|---|---|
| Салаты | Закуски | Первые блюда | Вторые блюда | ||
| Русская | Винегрет | Язык с хреном | Щи с квашеной капустой | Вареники с картошкой | Печеные яблоки с медом |
| Оливье | Студень говяжий | Рассольник домашний | Караси запеченые в сметане | Блинчатый пирог | |
| Сельдь под "шубой" | Судак заливной | Мясная солянка | Котлеты "Пожарские" | Пирожное "Картошка" | |
| Испанская | Севиче из гребешков | Эмпанадас | Хлебный суп с чесноком | Паэлья с морепродуктами | Чуррос |
| Тимбал из авокадо и тунца | Ахотомате | Астурийская фабада | Свиное раксо | Альмойшавена | |
| Фасоль с ветчиной | Чанфайна | Рыбный суп с манными клецками | Тортилья картофельная | Бунуэлос | |
| Французская | Вогезский салат | Рийет из курицы | Баклажанный крем-суп "Ренуар" | Картофель огратен | Бриоши |
| Салат "Панзанелла" | Делисьез из сыра | Французский тыквенный суп | Гратин из птицы | Лигурийский лимонный пирог | |
| Тар-тар | Маринованный лосось | Суп "Конти" | Тартифлетт | Саварен "Триумф" | |
Рекомендуем почитать
Лучшие программы для восстановления данных с любых носителей информации....
Здравствуйте.Одна из самых распространенных причин, по которым тормозит...
