Создание таблиц html
Опубликовано: 01.09.2018
Содержание:
Для создания таблиц используется основной тег Table, в котором поочерёдно размещают строки Tr, а в каждой строке помещаются ячейки Td. Формирование таблиц в html - процесс довольно несложный.
Рассмотрим создание таблицы, для начала - самой простой (вид в браузере → код):
Для того чтобы таблица отображалась с рамкой, в тег Table просто добавляем атрибут border с шириной 2px. Существующие в html атрибуты позволяют оформить внешний вид таблицы, или её отдельных ячеек. Основные из них мы будем использовать в уроке.
Не так сложно создать таблицу и с объединёнными ячейками. Для этого в теге Td используются атрибуты colspan и rowspan, которые служат для объединения ячеек по горизонтали и вертикали соответственно. Возьмём и усложним наш пример следующим образом:
Вначале, добавляем третью строку. Затем объединяем ячейки 1.1 и 1.2: к первой добавляем атрибут colspan со значением «2», а вторую удаляем из кода. Если значением атрибута было бы «3», то объединились бы три ячейки, а код ячейки 1.3 нужно было бы удалить.
Аналогично выглядит объединённые по вертикали ячейки 2.3 и 3.3, последняя изъята из кода. А для первой применили атрибут rowspan. Как вы заметили, мы определили ширину таблицы в % - половину от ширины страницы, добавив к тегу Table атрибут width. Осталось узнать об остальных атрибутах тегов, формирующих таблицу.
Оформление таблиц
Нужно сказать, что для оформления «шапки» таблицы существует тег Th. Он заменяет тег Td и создаёт заголовочную ячейку для колонки, выделяя её содержимое жирным шрифтом и центрируя текст. Для демонстрации возможностей оформления таблиц возьмём предыдущий пример и оснастим некоторые теги дополнительными атрибутами:
Перечислю их, а подробнее в справочнике html. Выровнять содержимое ячеек помогут атрибуты align и valign - по горизонтали и вертикали. Они применимы и для строк Tr, а align и для тега Table, т.е. для всей таблицы. Высоту ячейки, а, следовательно, строки, задаёт height, а фон - bgcolor.
Естественно, что оформлять внешний вид таблиц лучше через свойства css. Например, text-align и vertical-align послужат для выравнивания содержимого. Свойства margin и padding зададут поля и отступы, вместо аналогичных атрибутов cellspacing и cellpadding тега Table. Это же касается цвета, фона и размеров. Стили css позволяют добиться более значимых эффектов.
Использовать таблицы нужно умеренно - только там, где это действительно необходимо. Не следует использовать несовременную «табличную» вёрстку страниц, браузеры отображают их медленно из-за громоздкости табличного кода. Одобрительного отношения поисковых систем добиваются ресурсы с высокой скоростью загрузки .
Мы познакомились с созданием таблиц и тегами html для их формирования и размещения на странице. Следующие уроки будут посвящены вставке аудио и видео контента, и созданию форм.
Содержание: