Таблицы в HTML
Тема сегодняшней статьи — создание таблиц, их изменение. Научу делать фон, покажу как сделать таблицу с нуля, объединить ей ячейки, выровнять текст и сделать заголовок. Будет интересно!
Применение таблиц в HTML (см. также что такое html?) достаточно широкое. Можно применять их не только как логичную и понятную для человеческого глаза структуру данных в ячейках, строках и столбцах. При помощи таблиц можно еще очень удобно поместить информацию на странице.
Часто наши сайты и представляют собой что-то наподобие таблиц, только не в табличной верстке, а сверстанных при помощи дивов (блоков). Даже самая простая верстка сайта контейнерами напоминает таблицу, в левом (правом) меню которой находится боковая панель, в «шапке таблицы» — заголовок, меню, логотип, по центру — контент.
Что-то вроде этого и наблюдается при применении табличной верстки. Перейдем к практике.
Как в HTML сделать таблицу
Любая таблица содержит в себе строки и столбы. Они, в свою очередь, могут содержать текст и изображение.
Для добавления на страницу таблицы используется тег <table>. Это основной и главный контейнер, в который помещают элементы таблицы (строки и столбцы). И этот контейнер нужно закрывать — </table>.
Строки и столбцы задаются при помощи тегов <tr> и <td>, при этом вместо <td> вы можете смело использовать <th>. Отличие <th> от <td> в том, что браузер отображает текст в ячейке <th> как жирный, а также выравнивает его по центру ячейки — т.е. можно использовать в заголовках таблицы, не прибегая к дополнительному форматированию. В остальном между ними нет разницы, можно использовать любой.
Строки таблицы (<tr></tr>) должны быть помещены строго между <table></table>. А столбцы таблицы (<td></td>) в свою очередь помещаются строго между тегами <tr></tr>.
Давайте создадим на практике таблицу, которая будет состоять из одной строки и четырех столбцов. Нам нужно обозначить начало таблицы (<table>), начало строки (<tr>), четыре ячейки (<td>), конец строки (</tr>), конец таблицы (</table>).
Теперь давайте используем тег <th>, чтобы больше не возвращаться к этому.
Я поставил ширину таблицы 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″», а содержимое остальных удалить, предварительно поместив в объединенную ячейку.
Вот какой получился у меня код. Я скрыл ячейки для наглядности (чтобы вам было более понятно), но можно и удалить их.
Надеюсь понятно объяснил и привел хороший пример.
Как сделать заголовок у таблицы
Чтобы задать таблице заголовок — используйте теги <caption></caption> после начала таблицы (<table>), но до начала тега <tr>. Вот что получается:
Ну и небольшой HTML-хак для тех, кому нужно разместить заголовок таблицы под самой таблицей. Используйте атрибут align со значением bottom вот так:
И тогда заголовок таблицы переместится под таблицу.
Итак, мы рассмотрели почти все, за исключением… Фона!
Как сделать красивый фон у ячейки или всей таблицы
HTML позволяет задать цвет не только у всего фона таблицы, но и у каждой отдельной ячейки (если есть такая потребность). Устанавливает цвет фона таблицы или ячейки атрибут «bgcolor».
Давайте я сначала задам фон для всей таблицы. Это будет цвет «»lightgreen»» (а вообще можно задать его и вот так — «»#90EE90″»). Вот так теперь у меня начинается таблица:
Ого, цвет фона ячеек стал очень даже «»lightgreen»». Теперь покрашу одну из ячеек таблицы обратно в белый, присвоив ей такой же атрибут, только с другим цветом:
По-моему круто! Если бы я участвовал в конкурсе креативных таблиц (или обучения дошкольников HTML) — точно бы победил.
Еще хотел написать, как вставить картинку в качестве фона таблицы в HTML, но я уже упоминал об этом своей другой статье по ссылке выше.
border-color change in table cells
that I want when I hover on each of the cells, the borders of the cell could change color. So I wrote the following CSS trying to achieve the effect:
This code works, but not perfectly. It works great when I hover on the cells 1, 2, 3 (as numbered in the html), BUT when I hover, for example, on cell 4 5 6, the top border of the cell is not showing blue. I think the top borders of them are overlayed by the bottom borders of the cells above.
HTML тег <td>
Тег <td> используется для создания стандартной ячейки HTML таблицы. Тег должен находиться внутри контейнера <tr>, который определяет строки таблицы. Для определения заголовочной ячейки используется тег <th>.
Содержимым тега <td> может быть любой HTML элемент; текст, форма, изображение, таблица и т.д. По умолчанию содержимое ячейки отображается обычным шрифтом и выравнивается по левому краю.
Обратите внимание, что все строки таблицы содержат одинаковое количество ячеек, которое соответствует количеству ячеек самой длинной строки. Если в одной строке содержится меньше ячеек, чем в других строках, то браузер автоматически заполнит строку, помещая пустые ячейки в конец этой же строки.
Если вам необходимо подчеркнуть, что данные в других ячейках отсутствуют, создайте ячейку без содержимого в необходимом месте.
Добавленные браузером ячейки не имеют рамок, и если они находятся друг за другом, то будут отображаться в виде одной объединенной ячейки.
Таблица. Как изменить стиль таблицы в HTML?
Для изменения стиля вашей таблицы в HTML, необходимо применить правильные атрибуты к тегам <table>, <tr> и <td>, то есть к самой таблице, ее строкам и ячейкам.
Рассмотрим сначала атрибуты, применяемыем к тегу <table>.
Атрибуты тега <table>:
| Атрибут | Описание атрибута | Значения атрибута | Описание значения атрибута |
| align | Задает выравнивание таблицы по-ширине, относительно окна браузера или относительно блока, в котором размещена таблица | left | Выравнивает таблицу по левому краю, значение по-умолчанию |
| center | Выравнивает таблицу по центру | ||
| right | Выравнивает таблицу по правому краю | ||
| background | Указывает путь к файлу с изображением, которое будет использоваться для фона всей таблицы. Обратите внимание, что фоновая картинка устанавливается в масштабе 100% от ее реального размера, а в случаю, когда размер картинки меньше размера таблицы, картинка будет повторяться, чтобы покрыть всю площадь таблицы | Можно использовать и относительный и абсолютный путь к файлу | |
| bgcolor | Устанавливает цвет фона таблицы | Цвет по-умолчанию обычно белый | |
| border | Устанавливает толщину рамки таблицы в пикселах, допустимо указывать любое целое положительное число | По-умолчанию значение «0» | |
| bordercolor | Устанавливает цвет рамки таблицы | Значение по-умолчанию зависит от установленного у пользователя браузера и операционной системы | |
| cellpadding | Устанавливает расстояние от рамки до содержимого ячейких, допустимо указывать любое целое положительное число в пикселах или в процентах от доступного пространства | По-умолчанию значение «0» | |
| cellspacing | Устанавливает расстояние между внешними границами ячеек, допустимо указывать любое целое положительное число в пикселах | По-умолчанию значение: «0» (когда нет атрибута border); «2» (когда атрибут border установлен). |
|
| cols | Устанавливает количество столбцов в таблице | Вспомогательный атрибут, помогающий браузеру быстрее отобразить таблицу, не дожидаясь пока все содержимое таблицы будет подгружено | |
| frame | Задает значения для отображения в браузере границы вокруг таблицы | void | Не отрисовывать границы вокруг таблицы |
| border | Отрисовывать границу вокруг таблицы, значение по-умолчанию | ||
| above | Отрисовывать границу по верхнему краю таблицы | ||
| below | Отрисовывать границу снизу таблицы | ||
| hsides | Отрисовывать только горизонтальные границы сверху и снизу таблицы | ||
| vsides | Отрисовывать только вертикальные границы справа и слева таблицы | ||
| rhs | Отрисовывать границу только по правой стороне таблицы | ||
| lhs | Отрисовывать границу только по левой стороне таблицы | ||
| rules | Задает значения для отображения в браузере границ между ячейками таблицы | all | Граница отрисовывается вокруг каждой ячейки, значение по-умолчанию (если значение атрибута border отлично от нуля) |
| groups | Граница отрисовывается между группами, которые образуются тегами <thead>, <ttfoot>, <tbody>, <tcolgroup> или <tcol>. | ||
| cols | Отрисовывать границу только между колонками таблицы | ||
| none | Границы не отрисовываются, значение по-умолчанию (если border=»0″) | ||
| rows | Границы отрисовываются только между строками таблицы, созданными через тег <tr> | ||
| width | Задает ширину таблицы, допустимо указывать любое целое положительное число в пикселах или в процентах от доступного пространства | По-умолчанию, ширина таблицы вычисляется автоматически на основе содержимого таблицы | |
Пример HTML-кода с применением атрибутов тега <table>:
Результат с примером HTML-кода с применением атрибутов тега <table>:
| Ячейка1 | Ячейка2 |
| Ячейка3 | Ячейка4 |
Иногда для выполнения той или иной задачи, необходиомо изменить стиль конкретной строки в таблице, что реализуется применением атрибутов к тегу <tr>.
Атрибуты тега <tr>:
| Атрибут | Описание атрибута | Значения атрибута | Описание значения атрибута |
| align | Задает выравнивание содержимого всех ячеек данной строки по-горизонтали | left | Выравнивает содрежимое ячеек по левому краю, значение по-умолчанию |
| center | Выравнивает содрежимое ячеек строки по центру | ||
| right | Выравнивает содрежимое ячеек строки по правому краю | ||
| justify | Выравнивает содрежимое ячеек строки по-ширине (и по левому, и по правому краю ячейки) | ||
| bgcolor | Устанавливает цвет фона ячеек строки | Цвет по-умолчанию обычно белый | |
| bordercolor | Устанавливает цвет рамки ячеек строки | Значение по-умолчанию зависит от установленного у пользователя браузера и операционной системы | |
| valign | Задает выравнивание содержимого всех ячеек данной строки по-вертикали | top | Выравнивает содрежимое ячеек по верхнему краю строки |
| middle | Выравнивает содрежимое ячеек по середине строки, значение по-умолчанию | ||
| bottom | Выравнивает содрежимое ячеек по нижнему краю строки | ||
Пример HTML-кода с применением атрибутов тега <tr>:
Результат с примером HTML-кода с применением атрибутов тега <tr>:
| Ячейка1 | Ячейка2 |
| Ячейка3 | Ячейка4 |
Для изменения стилей конкретной ячейки, примененяются нижеперечисленные атрибуты к тегу <td>.