Как сделать фон таблицы в html
Обновлено: 07.07.2024
Любая таблица в HTML представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Создавать таблицы в HTML достаточно просто, необходимо лишь представить себе конечную модель. В языке HTML таблицы используются не только для представления данных, их можно применять для размещения текстовых блоков, изображений и т.д. на web-странице, т.е. с их помощью можно создавать макет самой страницы.
Содержание:
Элемент TABLE, создаем таблицу
Для создания таблиц в языке HTML применяется элемент table, а весь код (ее содержимое) таблицы располагается между тегами . Атрибуты этого элемента задают значения для всей таблицы целиком:
- background — задается изображение (URL), которое может быть фоном для всей таблицы;
- bgcolor — цвет фона таблицы, задается если не задан фон в виде изображения;
- border — толщина линий таблицы, если неободимы видимые границы;
- bordercolor — цвет линий таблицы;
- cellpadding — расстояние от текста внутри ячеек до границ ячеек;
- cellspacing — расстояние от границ таблицы до внешних границ ячеек (внутри таблицы);
- width — задается значение ширины таблицы в px или %.
Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:
Добавляем строку
В каждой таблице должна быть хотя бы одна строка, задается она тегами . В следующем примере смотрим пример добавления строки:
Добавляем ячейки
Ячейки образуют вертикальные столбцы таблицы, обозначаются они тегами . Добавляем к нашей таблице ячейки:
В браузере увидим получившуюся таблицу:
| Ячейка №1 | Ячейка №2 | Ячейка №3 |
Заголовки таблиц
Заголовок таблицы обозначает заголовок столбца или строки, определяется так же открывающим и закрывающим тегами . Посмотрим на примере:
В браузере будет выглядеть так:
| Столбец №1 | Столбец №2 | Столбец №3 |
|---|---|---|
| Ячейка №1 | Ячейка №2 | Ячейка №3 |
Объединение строк
В некоторых случаях может потребоваться растянуть один столбец на несколько строк, для этого применяется атрибут rowspan, значение которого определяет количество строк, необходимых для объединения. Смотрим пример:
| Строки №1 и №2 объединены | Ячейка№1 | Ячейка№2 |
|---|---|---|
| Ячейка №3 | Ячейка №4 | |
| Строка №3 | Ячейка №5 | Ячейка №6 |
Объединение столбцов
Столбцы объединяются по такому же принципу, только с использованием атрибута colspan. Смотрим пример:
| Столбцы №1 и №2 объединены | Столбец №3 | |
|---|---|---|
| Ячейка №1 | Ячейка №2 | Ячейка №3 |
| Строка №4 | Ячейка №5 | Ячейка №6 |
Атрибуты colspan и rowspan можно применять одновременно. В браузере это будет выглядеть так:
| Заголовок | Ячейка | |
|---|---|---|
| Ячейка | ||
| Ячейка | Ячейка | Ячейка |
| Заголовок | ||
|---|---|---|
| Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка |
А ты попробуй написать код самостоятельно!
Размеры и выравнивание таблицы
Высоту и ширину можно задавать как для всей таблицы в целом, так и для отдельных строк и столбцов делается это с помощью уже знакомых атрибутов width и height, значения задаются как в пикселях, так и в процентах.
Выравнивание таблицы по горизонтали задается атрибутом align, значения тебе уже знакомы: left, center, right. А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td. С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign. Он так же имеет свои значения — вертикальное выравнивание по центру middle, по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).
Фон таблицы
Фоновое изображение или цвет можно так же задать как для всей таблицы, так и для отдельно взятой ячейки, все зависит от того какие цели ты преследуешь. Задается это — для изображения — атрибутом background, в значении которого прописывается путь к необходимому графическому файлу. Для цветового фона — атрибутом bgcolor, здесь значением является наименование цвета.
В заключение
Продолжаем создавать сайт в блокноте. На прошлом уроке мы начали верстать главную страницу сайта. Для верстки страницы, в качестве основы, мы выбрали таблицу.
В наш html код, мы добавили таблицу с тремя строками и двумя столбцами, в результате, мы получили следующий код страницы:
Следующим шагом, давайте посмотрим, как в таблице можно изменять фон ячеек. Сделаем мы это на примере заголовка сайта – Header. Заголовок сайта у нас расположен в первой строке таблицы, которая состоит из одной ячейки.
Ну что же, давайте изменим наш html код, задав цвет ячейки заголовка Header, в результате, код который размечает ячейку заголовка сайта, у нас получится следующим:
Нажмем кнопку сохранения файла и обновим нашу страницу в окне браузера. После обновления страницы, мы увидим, что цвет ячейки таблицы заголовка сайта изменился.
Цвет ячейки таблицы, заданный с помощью параметра bgcolor,является однотонным.
В некоторых случаях, для улучшения визуального восприятия блоков на web странице, применяют градиентные цвета, то есть цвета, меняющие свой оттенок, переходя из темного в светлый или наоборот.
Эффект градиентного цвета можно получить только с использованием изображений.
Для того, чтобы в качестве фона ячейки таблицы использовать рисунок, мы используем параметр тега TD с названием background.
В качестве аргумента параметру background задается адрес изображения. Если окажется, что картинка меньше размеров ячейки таблицы, тогда она будет повторяться вправо и вниз, до заполнения ячейки таблицы.
Это свойство параметра background широко используется для создания фона ячеек таблицы с помощью картинок с малыми размерами.
Картинка с малыми размерами, занимает мало место на жестком диске, то есть может быть быстро загружена браузером. В тоже время, маленькая картинка, с помощью параметра background,может стать фоном большой ячейки таблицы. Ну, я думаю понятно, да?
Чтобы использовать картинку в качестве фона ячейки таблицы, ее нужно добавить в наш проект, поэтому создадим в каталоге нашего проекта папку для изображений, назовем ее, например: img.
В эту папку скопируем картинку header.jpg. На диске данная картинка занимает 878 байт, ее высота равна 79 пикселей, ширина 10 пикселей.
На данный момент мы разметили таблицу у которой нами задана ширина. Высота строк и ячеек таблицы, в данный момент, определяется размером шрифта текста, который мы добавили в таблицу.
Давайте посмотрим в html справочнике, как можно изменить высоту ячейки таблицы.
Вновь откроем описание тега TD в html справочнике.
Обратите внимание на параметр height, с помощью этого параметра можно задать высоту ячейки в пикселах или процентах.
Изменим высоту ячейки заголовка сайта, причем, пусть значение высоты будет равно высоте картинки, которую мы приготовили для фона таблицы.
Сохраним изменения в блокноте и обновим окно браузера. Мы увидим, что ячейка заголовка стала выше.
Продолжим редактирование html кода нашей страницы. Теперь зададим фон для ячейки заголовка.
Строка разметки для первой ячейки таблицы, теперь у нас будет выглядеть следующим образом:
Где код background="img/header.jpg"– делает фоном ячейки картинку header.jpg.
Не смотря на то, что картинка имеет ширину всего 10 пикселей, она растягивается на всю ширину ячейки таблицы.
Теперь я хочу пояснить, для чего, мы сначала задали фон ячейки кодом цвета (параметр bgcolor), а затем, сделали фон ячейки с помощью картинки (параметр background).
Дело в том, что если посетитель сайта отключает отображение картинок в своем браузере, (таких посетителей сегодня немного, но они есть), тогда в процессе просмотра они увидят фон ячейки в сплошном цвете.
То есть, использование приема задания фона для ячеек таблицы двумя способами способствую сохранению дизайна сайта для посетителей сайта, с различными настройками браузера.
Используйте свойство фона CSS, чтобы добавить фоновый рисунок в таблицы
Дифференциация таблиц от их фона помогает подчеркнуть содержание таблицы относительно всего остального на веб-странице. Чтобы добавить фон таблицы, вам нужно настроить каскадную таблицу стилей, поддерживающую вашу веб-страницу.
Начиная
Лучший способ добавить фоновое изображение в таблицу – использовать свойство CSS background . Чтобы подготовиться к эффективному написанию CSS и избежать неожиданных сбоев в отображении, откройте фоновое изображение и запишите высоту и ширину. Затем загрузите изображение на хостинг-провайдера. Проверьте URL для изображения; одна из наиболее распространенных причин, по которой изображения не отображаются, заключается в том, что в URL есть опечатка.
Вставьте блок стиля CSS в заголовок вашего документа:
Напишите свой CSS для фона на вашем столе и поместите его в блок стиля:
Поместите вашу таблицу в HTML:
Установите ширину и высоту таблицы в соответствии с шириной и высотой изображения:
Если содержимое вашей таблицы больше, чем высота и ширина изображения, фоновое изображение будет отображаться только один раз.
Положите фон только на один стол
Приведенные выше инструкции будут устанавливать одинаковое фоновое изображение для каждой таблицы на странице. Если вы хотите разместить фон только для определенных таблиц, используйте атрибут class .
Добавьте класс background к любой таблице, в которую вы хотите добавить фоновое изображение. Установите ширину и высоту для этих таблиц.
По умолчанию значение повторения будет выложено мозаикой, но вы также можете установить значение повторения в
для плитки горизонтально или вертикально, соответственно.
Цвета фона ячейки блокируют фоновое изображение таблицы
Любые цвета фона, установленные для ячеек таблицы, будут иметь приоритет над фоновым изображением таблицы. Поэтому будьте осторожны при использовании фоновых цветов в ваших ячейках в сочетании с фоновыми изображениями таблицы.
Соображения
Любое изображение, которое вы используете, должно быть надлежащим образом лицензировано; только то, что вы можете найти фотографию в Интернете, не означает, что вы можете присвоить ее для своего собственного использования. Уважайте авторские права!
Фоны таблиц будут отличать ваши таблицы от базовой страницы. Однако дважды подумайте, прежде чем использовать эту технику. Вставка нейтрального изображения может не отвлекать, но сложные картинки, которые должны быть милыми (например, вставка изображения котенка за столом с указанием усыновления домашних животных), могут показаться непрофессиональными и могут повлиять на читаемость табличных данных.
Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.
Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.
Форматирование таблиц
1. Границы таблицы border
Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border :
Границы ячеек заголовка каждого столбца задаются для элемента th :
Границы ячеек тела таблицы задаются для элемента td :
Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом:
Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:
Границы можно задавать частично:
Подробнее о свойстве border вы можете прочитать здесь.
2. Как задать ширину и высоту таблицы
По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).
Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.
Ширину таблицы и столбцов обычно задают в px или % , например:
Фиксировать высоту с помощью свойства height не рекомендуется.
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. Пример отображения заголовка под таблицей
6. Как убрать промежуток между рамками ячеек
Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся.
| border-collapse | |
|---|---|
| Значения: | |
| separate | Рамки ячеек располагаются раздельно. |
| collapse | Рамки ячеек сливаются в одну, а промежутки между рамками убираются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 2. Пример таблиц со сливающимися и раздельными рамками ячеек
7. Как увеличить промежуток между рамками ячеек
С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом.
| border-spacing | |
|---|---|
| Значения: | |
| Добавляет промежутки между рамками как по вертикали, так и по горизонтали. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая — вертикальный. | |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 3. Пример таблиц с увеличенными промежутками между рамками ячеек
8. Как скрыть пустые ячейки таблицы
Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table , то ячейка не будет скрыта.
| empty-cells | |
|---|---|
| Значения: | |
| show | Рамка и фон пустой ячейки будут отрисовываться так же, как для ячейки таблицы, имеющей содержимое. |
| hide | Если все ячейки строки пусты, то вся строка отображается так, если бы было задано значение display: none . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 4. Пример скрытия пустой ячейки таблицы
9. Компоновка макета таблицы с помощью свойства table-layout
Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек.
Свойство не наследуется.
| table-layout | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию. Ширина макета таблицы определяется шириной её содержимого с учетом значений свойств padding-left , padding-right , border-left width плюс одна ширина border-right последней ячейки в ряду, или заданной шириной ячеек и толщиной рамки. Если ширина ячеек не задана явно, они могут быть разной ширины. |
| fixed | Свойство сработает только в том случае, если для таблицы задана ширина. Ширина ячеек будет одинаковой, а содержимое ячеек, которое не помещается в ячейку, будет наползать под содержимое соседней ячейки. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
10. Лучшие макеты таблиц
По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine
1. Горизонтальный минимализм
Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td .
Добавление эффекта :hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.
2. Вертикальный минимализм
Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.
Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.
4. Горизонтальная зебра
Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.
5. Газетный стиль
Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект :hover при наведении на строку.
6. Фон таблицы
Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.
Читайте также: