Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:
Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь: R598551293139
Урок №7: создание таблиц в HTML
Таблицы используют для отображения различных статистических данных или информации, которую удобнее предоставлять именно таким способом. Содержимое таблицы находится в ячейках, которые являются отдельными полями, и из которых состоят строки и столбцы таблицы. Надписи, которые находятся над столбцами и описывают их содержимое, называются шапкой таблицы. При создании таблицы возможно понадобиться дополнительное форматирование: выравнивание в ячейках данных, настройка месторасположения рамок или изменение фона таблицы.
Необходимые теги для создания таблиц
При создании таблиц используются следующие парные теги:
<table> - указывает на начало и конец таблицы. Все содержимое таблицы и все ее теги и параметры должны находится между тегами <table> и </table>
<tr> - отмечает начало и конец строки в таблице. Все ячейки этой строки и шапки должны находится между тегами <tr> и </tr>
<th> - определяет начало и конец ячейки шапки таблицы.
<td> - задает начало и конец ячейки данных в таблице
<caption> - задает название таблицы, этот парный тег также находится в контейнере table.
Для примера создадим небольшую таблицу, которая состоит из шапки, трех столбцов и двух строк, а также имеет название.
Получим таблицу уже с более симпатичным видом. Результат в браузере:
Объединение ячеек таблицы
Объединить строки и ячейки можно с помощью параметров тега <table>, однако при работе с более сложными таблицами понадобиться задействовать параметы тегов <tr> и <td>. За внешнюю рамку отвечает параметр тега <table> - frame, который имеет следующие значения:
void - внешняя рамка таблицы полностью отсутствует.
above - отображает только верхнюю часть рамки таблицы
below - отображает только нижнюю часть рамки таблицы
hsides - отображает только верхнюю и нижнюю части рамки таблицы
lhs - отображает только левую часть рамки таблицы
rhs - отображает только правую часть рамки таблицы
vsides - отображает только левую и правую части рамки таблицы
box - рамка отображается со всех четырех сторон
За рамки границ ячеек отвечает параметр тега <table> - rules, который имеет следующие значения:
none - убирает все границы между ячейками в таблице.
groups - задает границы между группами строк и столбцов
rows - границы есть только между строками
cols - границы есть только между столбцами
all - отображаются все границы
Для примера уберем внешнюю рамку нашей таблицы, а также объединим все ее строки:
Формирование таблиц происходит построчно, т.е если задать параметры тегу <tr>, то значение примут все ячейки тегов <td> и <th> в данной строке таблицы. В данных тегах работают все параметры форматирования текста, изображения и т.д. Также можно использовать такие параметры:
align - выравнивает текст в ячейках по горизонтали, имеет такие значения: по правому краю ячейки (right), по левому (left), по центру (center)
valign - выравнивает текст в ячейках по вертикали, имеет такие значения: текст придерживается верхней части ячейки(top), нижней части (bottom), по центру (middle)
bgcolor - задает фоновый цвет строки или ячейки
width - задает ширину ячеек в пикселах или %, где 100% - вся ширина таблицы
height - задает высоту ячеек в пикселах или %, где 100% - вся ширина таблицы
Если не указывать ширину и высоту ячеек, эти параметры будут автоматически формироваться в зависимости от содержимого таблицы. Отредактируем нашу таблицу таким образом (фрагменты на которые стоит обратить внимание выделены красным):
Рассмотрим выделенные параметры. В данной таблице cellspacing="0" что отключило промежуток между основной рамкой и ячейками таблицы. Задан параметр border="3" и bordercolor="yellow" - это создало границе таблицы желтого цвета, шириной в 3 пиксела. Тег tr bgcolor="plum" - задал фон всем ячейкам первой строки, которая является шапкой таблицы. Теги th width="40%" 20% 40% - задали ширину столбцов таблицы в процентах, именно поэтому центральный столбец меньше остальных. Тег tr align="center" - теперь весь текст в ячейках этой строки выравнивается по центру. Тег td bgcolor="red" - задал красный фон данной ячейки. Цвет фона ячейки стоит по приоритетам выше чем, цвет в таблице в общем, поэтому в некоторых ячейках розовый цвет сменился на другие.
Параметры объединения ячеек тега td
Ячейки таблицы можно объединять между собой, убирая их горизонтальные и вертикальные границы. Для этого в теге <td> используют такие параметры:
colspan - объединяет горизонтальные ячейки, в значении этого параметра указывается сколько ячеек необходимо объединить
rowspan - объединяет вертикальные ячейки, в значении этого параметра также указывается сколько ячеек необходимо объединить
Cоздадим небольшую веб-страничку с табличной структурой и поместим в ее основной контент нашу последнюю таблицу:
Шапка сайта в объединенных ячейках с высотой 100 пикселей.
Главное меню
Название таблицы
Имя посетителя
Вы знаете язык HTML?
Дата последнего посещения
Дмитрий
Нет
1 ноября
Вероника
Да
23 января
Нижняя часть сайта в объединенных ячейках с высотой 30 пикселей.
Данная страничка создана с помощью таблицы, с тремя строками и двумя столбцами (2x3). Ячейки строк "Шапка сайта" и "Нижняя часть сайта" объединены с помощью параметра td colspan="2". Как это выглядит в HTML документе:
<table width="80%" border="2" align="center" cellspacing="1" cellpadding="10"> <tr bgcolor="#FFDEAD"> <td colspan="2" height="100">Шапка сайта в объединенных ячейках с высотой 100 пикселей.</td> </tr> <tr bgcolor="#FFFFFF"> <td width="175"><!-- Основной контент страницы, сюда вставим код предыдущей таблицы --> </td></tr><tr bgcolor="#FFDEAD"> <td colspan="2" height="30">Нижняя часть сайта в объединенных ячейках с высотой 30 пикселей.</td> </tr> </table>
В результате получилась таблица в таблице. Также построение сайтов может быть с помощью фреймов и блоков. Знание табличной структуры сайтов очень важно и в дальнейшем очень поможет. Значительно расширяет возможности работы с таблицами CSS: Оформление таблиц в CSS
R598551293139
