В этом уроке по HTML, посвященном таблицам, я объясню, как создать простую таблицу, добавлять и удалять границы, создавать макеты, придавать ячейкам нужную форму и размер, размещать содержимое ячеек и добавлять цвет.
Он прост в использовании и разработан для новичков. Я включил изображения, чтобы вы могли увидеть, как должен выглядеть код HTML 5.
Я бы также рекомендовал использовать этот бесплатный редактор HTML-кода. Введите свой код в левой части, и предварительный просмотр появится справа. Это отличный сайт, если вы планируете исследовать мир HTML в будущем.
Создайте простую таблицу
Прежде чем вы сможете делать что-то необычное с макетом таблицы, вы должны создать таблицу. Теги
и
заключают в себе все остальные элементы таблицы. Каждая строка в таблице настраивается с помощью тега
(строка таблицы), за которым следует тег
(данные таблицы) для каждой ячейки в этой строке. Следующий код настраивает простую таблицу 2 на 2:
Содержимое ячейки
Содержимое ячейки
Содержимое ячейки
Содержимое ячейки
Теги
,
и
имеют различные атрибуты, которые позволяют вам управлять внешним видом самой таблицы, а также размещением ее содержимого. (Прочтите остальные наши советы по таблицам, чтобы ознакомиться с ними.) При отсутствии этих атрибутов таблица по умолчанию вписывается в содержимое ячейки. Вы заметите, что я добавил в третьей строке, так как мне нужен был пробел между словами. Таким образом, в большинстве браузеров код выше выдает таблицу без границ, которая выглядит так:
СМ.: 5 основных правил HTML для начинающих (TechRepublic)
Добавить и удалить границы
Конечно, таблицы не обязательно должны содержать только текст. Большинство сложных макетов, которые вы видите в Интернете, объединяют изображения и текст внутри различных ячеек таблицы — вы просто не видите линий или границ между ячейками. Атрибут border тега
позволяет вам назначать толщину (в пикселях) линиям границ.
Чтобы создать таблицу с границей в 2 пикселя, просто добавьте border="2″ к тегу
. Чтобы сделать невидимую границу, установите атрибут border на 0. (Хотя большинство браузеров по умолчанию устанавливают границу таблицы на 0, специально указав, что это гарантирует, что граница будет невидимой во всех браузерах.)
Ниже приведены два примера того, как это выглядит. Слева — коды для одной таблицы с 2-пиксельной границей и другой таблицы с невидимой границей. Готовые продукты — справа.
Пример первый:
Таблица с рамкой в 2 пикселя. Изображение: HTML Code Editor
Таблица с невидимой границей. Изображение: HTML Code Editor
С CSS, размещенным перед HTML, мы получаем элегантное решение. Изображение: Редактор кода HTML
Посмотрите наши продукты
Узнайте о нас
Придайте ячейкам желаемую форму
HTML не навязывает вам простые сетки для макета таблицы. С помощью атрибутов rowspan и colspan тега
вы можете сделать так, чтобы заданная ячейка охватывала высоту или ширину нескольких других ячеек. Чтобы использовать эти атрибуты, просто присвойте им значение, основанное на количестве ячеек, которые вы хотите охватить.
Например, следующая таблица состоит из двух строк по три столбца в каждой:
Колонки на шоу. Изображение: HTML Code Editor
и удалите два других тега
в этой строке:Атрибут colspan добавляет новое измерение к столбцам. Изображение: Редактор кода HTML
Содержимое ячейки
Содержимое ячейки
Содержимое ячейки
Содержимое ячейки
Если вы хотите, чтобы первая ячейка охватывала две строки, добавьте rowspan="2" к ее тегу
и удалите первый тег
из второй строки:Атрибут rowspan изменяет строки. Изображение: HTML Code Editor
Содержимое ячейки
Содержимое ячейки
Содержимое ячейки
Содержимое ячейки
Содержимое ячейки
Конечно, вы можете сделать свои таблицы гораздо более сложными, чем эти примеры. Если вы решите сделать это, всегда будет хорошей идеей набросать свои таблицы перед тем, как их создавать.
Сделайте ячейки нужного вам размера
Ячейки таблицы по умолчанию изменяют свой размер в соответствии со своим содержимым. Но что, если вам нужны ячейки другого размера? Введите атрибуты width и height тега
. Просто укажите размер в пикселях, и все готово. Например, чтобы сделать ячейку шириной 100 пикселей и высотой 80 пикселей, вы должны сделать следующее:Атрибуты ширины и высоты предоставляют вам множество вариантов. Изображение: Редактор кода HTML
Атрибуты align и valign в действии. Изображение: Редактор HTML-кода
Содержимое ячейки
Примечание: когда вы размещаете объекты в ячейках таблицы и хотите, чтобы они были выровнены правильно, не оставляйте места после открывающего
или перед закрывающим
ячейки. Содержимое ячейки должно касаться тегов
, чтобы обеспечить правильное выравнивание, особенно при работе с изображениями.
Сделайте свой стол красочным
Надоело, что ваша таблица сливается со страницей? Тогда измените цвет ее фона! Раньше приходилось добавлять атрибут bgcolor к тегу
и назначать ему стандартный шестнадцатеричный код цвета или однословное название цвета. Однако этот атрибут больше не поддерживается в HTML 5. Это значит, что мы снова обращаемся к CSS.
Например, этот код создает простую таблицу с бледно-голубым фоном:
Не все должно быть черно-белым. Изображение: HTML Code Editor
Содержимое ячейки
Содержимое ячейки
Содержимое ячейки
Содержимое ячейки
Разместите свою таблицу на странице
В дополнение к форматированию элементов в таблице, вы можете контролировать, где ваша таблица будет отображаться на странице. Два атрибута
могут вам помочь:
Атрибут align выравнивает таблицу по левому, правому краю или по центру страницы (по умолчанию — по левому краю). Атрибут width позволяет указать фиксированное количество пикселей для ширины таблицы (используя число, например,
) или позволяет сделать так, чтобы таблица занимала процент от ширины окна браузера (назначив процент, например,
).
Таким образом, следующий код создает таблицу шириной 150 пикселей, выравниваемую по центру страницы:
<ширина таблицы="150" выравнивание="центр">
Приведенный ниже код создает таблицу размером в три четверти ширины окна браузера, выровненную по правой стороне страницы:
<ширина таблицы="75%" выравнивание="вправо">
TechRepublic Academy предлагает больше информации о HTML, CSS
Как видите, имея базовые знания HTML, таблицы можно легко построить. На самом деле, когда вы познакомитесь с HTML поближе, вы обнаружите, что некоторые из них можно заменить CSS.
Если вы хотите узнать больше о HTML и CSS, то отправляйтесь на TechRepublic Academy. На этом сайте доступно множество обучающих курсов. Удачной охоты!
Вклад Дональда Сент-Джона с дополнительными материалами и советами Кормака Фостера, Марка Кауфмана, Чарити Кан и Мэтта Роттера.
Подпишитесь на рассылку Developer Insider
От самых популярных языков программирования до комментариев по ОС Linux — получайте новости и советы от разработчиков и разработчиков с открытым исходным кодом, которые вам нужно знать. Доставка по вторникам и четвергам
Адрес электронной почты
Подписываясь на нашу рассылку, вы соглашаетесь с нашими Условиями использования и Политикой конфиденциальности. Вы можете отписаться в любое время.
Подписаться
Подпишитесь на рассылку Developer Insider
От самых популярных языков программирования до комментариев по ОС Linux — получайте новости и советы от разработчиков и разработчиков с открытым исходным кодом, которые вам нужно знать. Доставка по вторникам и четвергам
Адрес электронной почты
Подписываясь на нашу рассылку, вы соглашаетесь с нашими Условиями использования и Политикой конфиденциальности. Вы можете отписаться в любое время.
Подписаться
