Как сделать фон в таблице html
HTML тег
С недавнего времени тег
Синтаксис тега
Между открывающим тегом
Как сделать таблицу в html
Приведем пример, html код:
Преобразуется на странице в следующее:
Обратите внимание на ячейку
Теперь рассмотрим подробно все атрибуты тега
Атрибуты и свойства тега
К открывающему тегу
1. Свойство align=”параметр” – задает выравнивание таблицы. Может принимать следующие значения:
- left – выравнивание по левому краю
- center – выравнивание по центру
- right – выравнивание по правому краю
В разобранном выше примере мы выравнивали таблицу по центру align=”center” .
Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы
2. Свойство background=”URL” – задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.
Преобразуется на странице в следующее:
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style=”color:white;” . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.
Более подробно про фон читайте в статье: как сделать фон для сайта
3. Свойство bgcolor=”цвет” – задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border=”число” – задает толщину рамки таблицы. В предыдущих примерах мы указывали border=”1″ , что означает толщина рамки – 1 пиксель.
5. Свойство bordercolor=”цвет” – задает цвет рамки. Если border=”0″ , то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding=”число” – отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing=”число” – расстояние между ячейками в пикселях.
8. Свойство cols=”число” – число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame=”параметр” – как отображать границы вокруг таблицы. Может принимать следующие значения:
- void – не отрисовывать границы
- border – граница вокруг таблицы
- above – граница по верхнему краю таблицы
- below – граница снизу таблицы
- hsides – добавить только горизонтальные границы (сверху и снизу таблицы)
- vsides – рисовать только вертикальные границы (слева и справа от таблицы)
- rhs – граница только на правой стороне таблицы
- lhs – граница только на левой стороне таблицы
10. Свойство height=”число” – задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules=”параметр” – где отображать границы между ячейками. Может принимать следующие значения:
- all – линия рисуется вокруг каждой ячейки таблицы
- groups – линия отображается между группами, которые образуются тегами
12. Свойство width=”число” – задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство class=”имя_класса” – можно указать имя класса, которому принадлежит таблица.
14. Свойство style=”стили” – стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге
Атрибуты и свойства
1. Свойство align=”параметр” – задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:
- left – выравнивание по левому краю
- center – выравнивание по центру
- right – выравнивание по правому краю
2. Свойство background=”URL” – задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.
3. Свойство bgcolor=”цвет” – задает цвет фона ячейки.
4. Свойство bordercolor=”цвет” – задает цвет рамки ячейки.
5. Свойство char=”буква” – задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.
6. Свойство colspan=”число” – задает число объединяемых горизонтальных ячеек.
7. Свойство height=”число” – задает высоту таблицы: либо в пикселях, либо в процентах %.
8. Свойство width=”число” – задает ширину таблицы: либо в пикселях, либо в процентах %.
9. Свойство rowspan=”число” – задает число объединяемых вертикальных ячеек.
10. Свойство valign=”параметр” – выравнивание содержимого ячейки по вертикали.
- top – выравнивание содержимого ячейки по верхнему краю строки
- middle – выравнивание по середине
- bottom – выравнивание по нижнему краю
- baseline – выравнивание по базовой линии
Примечание 1
Как сделать, чтобы границы ячеек в таблице не склеивались
В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border. Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse :
Более подробно про это свойство читайте в специальной статье border-collapse CSS
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
Учимся изменять цвет таблицы в HTML
Не кажется ли вам, что черно-белая таблица выглядит скучновато? Вот и мы так думаем! Поэтому в этом уроке мы поговорим о том, как изменить цвет таблицы в HTML. Существует три возможности добавления цвета, для каждой из которых присутствует свое свойство.
- Указание цвета фона ячеек. Осуществляется с помощью свойства background-color.
- Указание цвета текста в ячейках. Осуществляется с помощью свойства color.
- Указание цвета рамок ячеек. Осуществляется с помощью свойства border-color.
Ранее, чтобы изменить цвет, применялась более сжатая форма описания рамки. Выглядела она вот так:
И за цвет здесь отвечала последняя часть – lightrgay.
Существуют различные способы, позволяющие задать значение цветов в CSS. Мы же покажем вам, как происходит описание цвета с использованием атрибутов.
Как изменить цвет ячейки
Давайте посмотрим, как выглядит код в CSS, в котором задан цвет для ячейки.
Разумеется, изменять цвета можно и у table, и у td, и у th. Давайте попробуем придать нашей таблице умножения более солидный вид.
Добавим стили для ячеек-заголовков с тегом th, а также для ячеек по диагонали, в которых расположены квадраты чисел:
Результат в браузере:
Как изменить цвет рамки в таблице
Как вы уже заметили в примере выше, в таблице мы изменили цвет рамки. Для этого мы использовали свойство border. В нём задаются параметры в порядке, перечисленном ниже:
- тип линии, в нашем случае solid (сплошная)
- толщина линии, в нашем случае 1px
- цвет линии, в нашем случае синий
Напомним ещё раз, как выглядит задание цвета рамки для ячейки:
Как изменить цвет строки в таблице
Итак, мы с вами научились менять цвета ячеек, а также ячеек-заголовков, используя возможности CSS. Если мы указываем стили для таких тегов, как th или td, то должны понимать, что применимы стили будут и к остальным тегам.
Однако, бывают ситуации, когда надо изменить цвет конкретной ячейки или же несколько ячеек, или же всю строку целиком. Что делать в данном случае? Здесь следует использовать классы, а также осуществлять применение их стилей. На практике это выглядит вот так:
А чтобы изменить цвет с помощью этого класса определённые строки нужно сделать следующее:
И результат в браузере:
Как изменить цвет текста в таблице
Для того, чтобы изменить цвет текста в таблице используется свойство color. Применять его можно к самым разным элементам: к table, tr, th, td. В зависимости от этого цвет в выбранном элементе будет изменён. Например, для всей таблицы зададим зелёный цвет шрифта:
Аналогично можно изменять цвет для отдельных ячеек. А на этом данный урок заканчивается, не забудьте сделать домашнее задание. Всем пока!
Таблицы в HTML
Тема сегодняшней статьи — создание таблиц, их изменение. Научу делать фон, покажу как сделать таблицу с нуля, объединить ей ячейки, выровнять текст и сделать заголовок. Будет интересно!
Применение таблиц в HTML (см. также что такое html?) достаточно широкое. Можно применять их не только как логичную и понятную для человеческого глаза структуру данных в ячейках, строках и столбцах. При помощи таблиц можно еще очень удобно поместить информацию на странице.
Часто наши сайты и представляют собой что-то наподобие таблиц, только не в табличной верстке, а сверстанных при помощи дивов (блоков). Даже самая простая верстка сайта контейнерами напоминает таблицу, в левом (правом) меню которой находится боковая панель, в «шапке таблицы» — заголовок, меню, логотип, по центру — контент.
Что-то вроде этого и наблюдается при применении табличной верстки. Перейдем к практике.
Как в HTML сделать таблицу
Любая таблица содержит в себе строки и столбы. Они, в свою очередь, могут содержать текст и изображение.
Для добавления на страницу таблицы используется тег
Строки и столбцы задаются при помощи тегов
Давайте создадим на практике таблицу, которая будет состоять из одной строки и четырех столбцов. Нам нужно обозначить начало таблицы (
Теперь давайте используем тег
Я поставил ширину таблицы 400 и, как видите, первая и третья ячейка выделены жирным и выравниваются по центру. Остальные — по левому краю. Я рекомендую всегда уделять достаточное количество времени форматированию кода, чтобы не запутаться в нем. В маленькой таблице это может не играть большой роли, но вот в большой…
Давайте немного подробнее о ширине, раз я ее упомянул. Ширина таблицы задается атрибутом width, высота — height. Изменять подобным образом можно не только ширину и высоту таблицы, но и размеры ячеек (они все должны помещаться в таблицу, иначе браузер не поймет, что вы от него хотите).
Эти значения (ширина и высота) задаются в пикселях, процента. Можно оставить и так, ничего не писать, браузер подумает, что вам лень было писать «px» и сочтет цифру за пиксели.
Ну а если вы хотите выровнять содержимое одной или нескольких табличных ячеек, — используйте атрибут align со значениями left, center, right. Это горизонтальное выравнивание, а есть еще вертикальное и у него свой отдельный атрибут — valign, который может принимать значения: baseline (вертикальное выравнивание точно по базовой линии), bottom (по нижнему краю), middle (значения ячеек будут выравнены вертикально по середине), top (по верхнему краю). По умолчанию браузеры выравнивают ячейки по центру (середине).
Увеличиваем рамку (границы) таблицы и меняем ее цвет
Вы наверное заметили, я уже показал вам как можно работать с рамкой и шириной таблицы. Вообще, по дефолту таблицы всегда отображается в браузере без рамки, а это не всегда удобно. Вот почему:
Согласитесь, как-то не очень. Но это не проблема для тех, кто уже знаком с HTML-атрибутом border, который я и использовал в примерах в начале поста.
Добавляем всего 1 атрибут и становится уже получше:
Это как в Экселе! Представьте, что не было бы разделения ячеек линиями (сеткой)? Ну ужас же. А вот что будет, если выставить border, равный 10.
Как видите, border влияет только на внешнюю границу и обрамление таблицы, меняя ширину внешней рамки, а границы между ячейками таблицы оставляя прежними.
Давайте изменим цвет этой рамки, ведь для этого тоже есть атрибут — bordercolor. Установим его значение равным «d3d3d3». Результат:
Как сделать отступы в таблице
Отступы в таблице также нужны для повышения «читаемости», как и границы ячеек. Для создания отступов нам понадобится атрибут «cellspacing». Я буду по прежнему работать с нашей 4х4 таблицей, применяя к ней этот атрибут. Актуализирую код для вас (я привожу только одну строку, чтобы не загромождать пост):
Это были отступы снаружи ячеек. Но есть похожий атрибут для задания отступов внутри ячеек — cellpadding, сейчас я сделаю его также равным 10 и вы увидите, как увеличилось расстояние от содержимого ячейки до ее границ (пришлось сделать количество ячеек поменьше, чтобы таблица не разрасталась чрезмерно). Код:
Теперь уберем «cellspacing» и оставим только «cellpadding». Результат:
Вот и разобрались с тем как создать отступы в таблице и управлять ими. Отлично! Если Вас интересуют как делать перенос строки, то об этом написано здесь.
Как грамотно объединить ячейки в таблице
Для объединения ячеек в вашей таблице также есть специальные атрибуты. Это «colspan» и «rowspan». Первый (colspan) объединяет ячейки по столбцам (горизонтали), второй (rowspan) — по строкам или по вертикали. Давайте объединим что-нибудь в нашей таблице.
Здесь внимательно! При объединении ячеек, вам нужно уменьшить их количество на то число (минус один), которое вы прописываете в параметрах атрибута. Если вы будете создавать таблицу в HTML, объединять ячейки не удаляя лишние, то сайт будет ехать. Объединяем две — удаляем одну. Объединяем три — удаляем две. И так далее.
При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете. Сейчас покажу на примере.
При слиянии ячеек в колонках или столбцах, одну ячейку нужно удалять! И делать это столько раз, сколько ячеек вы объединяете.
Сейчас покажу на примере. Вот наша текущая таблица:
Давайте объединим ячейки с номерами «1 и 2», «5 и 9», «4, 8, 12», «6 и 7». Смотрите как круто получилось, я сам не ожидал!
Принцип объединения такой.
При горизонтальном объединении ячейки номер 1 и 2, нужно в первой прописать «colspan=”2″», содержимое второй поместить в первую (мы же объединяем) и удалить вторую ячейку (или скрыть ее от HTML как это сделал я — потом покажу.)
При вертикальном объединении ячеек номер 4, 8, 12, нужно в первой ячейке (номер 4) прописать «rowspan=”2″», а содержимое остальных удалить, предварительно поместив в объединенную ячейку.
Вот какой получился у меня код. Я скрыл ячейки для наглядности (чтобы вам было более понятно), но можно и удалить их.
Яч. 3
Яч. 4 , 8 , 12
Яч. 5 и 9
Яч. 6 и 7
Надеюсь понятно объяснил и привел хороший пример.
Как сделать заголовок у таблицы
Чтобы задать таблице заголовок — используйте теги после начала таблицы (
Ну и небольшой HTML-хак для тех, кому нужно разместить заголовок таблицы под самой таблицей. Используйте атрибут align со значением bottom вот так:
И тогда заголовок таблицы переместится под таблицу.
Итак, мы рассмотрели почти все, за исключением… Фона!
Как сделать красивый фон у ячейки или всей таблицы
HTML позволяет задать цвет не только у всего фона таблицы, но и у каждой отдельной ячейки (если есть такая потребность). Устанавливает цвет фона таблицы или ячейки атрибут «bgcolor».
Давайте я сначала задам фон для всей таблицы. Это будет цвет «”lightgreen”» (а вообще можно задать его и вот так — «”#90EE90″»). Вот так теперь у меня начинается таблица:
Ого, цвет фона ячеек стал очень даже «”lightgreen”». Теперь покрашу одну из ячеек таблицы обратно в белый, присвоив ей такой же атрибут, только с другим цветом:
По-моему круто! Если бы я участвовал в конкурсе креативных таблиц (или обучения дошкольников HTML) — точно бы победил.
Еще хотел написать, как вставить картинку в качестве фона таблицы в HTML, но я уже упоминал об этом своей другой статье по ссылке выше.
Источники:
https://zarabotat-na-sajte.ru/uroki-html/teg-table.html
https://webshake.ru/kurs-html-dlya-nachinayushih/kak-izmenit-cvet-tablicy-v-html
https://blogwork.ru/tablicy-v-html/
