R598551293139
Урок №7: создание таблиц в HTML
Таблицы используют для отображения различных статистических данных или информации, которую удобнее предоставлять именно таким способом. Содержимое таблицы находится в ячейках, которые являются отдельными полями, и из которых состоят строки и столбцы таблицы. Надписи, которые находятся над столбцами и описывают их содержимое, называются шапкой таблицы. При создании таблицы возможно понадобиться дополнительное форматирование: выравнивание в ячейках данных, настройка месторасположения рамок или изменение фона таблицы.
Необходимые теги для создания таблиц
При создании таблиц используются следующие парные теги:
- <table> - указывает на начало и конец таблицы. Все содержимое таблицы и все ее теги и параметры должны находится между тегами <table> и </table>
- <tr> - отмечает начало и конец строки в таблице. Все ячейки этой строки и шапки должны находится между тегами <tr> и </tr>
- <th> - определяет начало и конец ячейки шапки таблицы.
- <td> - задает начало и конец ячейки данных в таблице
- <caption> - задает название таблицы, этот парный тег также находится в контейнере table.
Для примера создадим небольшую таблицу, которая состоит из шапки, трех столбцов и двух строк, а также имеет название.
В браузере получим такую, не особо привлекательную табличку, так как параметры тегов не были использованы, рамка таблицы также отсутствует.
<table>
<caption>Название таблицы</caption>
<tr>
<th>Имя посетителя</th>
<th>Вы знаете язык HTML?</th>
<th>Дата последнего посещения</th>
</tr>
<tr>
<td>Дмитрий</td>
<td>Нет</td>
<td>1 ноября</td>
</tr>
<tr>
<td>Вероника</td>
<td>Да</td>
<td>23 января</td>
</tr>
</table>
Параметры тега table
Для красивого оформления таблицы, в теге <table> имеются следующие параметры.
- border - создает рамку таблицы указанной ширины в пикселах
- width - задает ширину таблицы в пикселах или % от ширины экрана
- bgcolor - задает фоновый цвет таблицы
- background - заливает всю таблицу фоновым рисунком
- align - выравнивает положение таблицы. Значения этого параметра: влево (right), вправо (left), по центру (center).
- cellspacing - задает ширину границ между ячейками в пикселах.
- cellpadding - задает ширину промежутка между рамкой ячейки и ее содержимым с обоих сторон в пикселах
Зная параметры таблицы ее можно неплохо отформатировать. Отформатируем таблицу с помощью всех вышеперечисленных параметров:
|
<table width="600" border="3" bgcolor="pink" align="center" cellspacing="4" cellpadding="8"> <caption>Название таблицы</caption> <tr> <th>Имя посетителя</th> <th>Вы знаете язык HTML?</th> <th>Дата последнего посещения</th> </tr> <tr> <td><b>Дмитрий</b></td> <td>Нет</td> <td>1 ноября</td> </tr> <tr> <td>Вероника</td> <td>Да</td> <td>23 января</td> </tr> </table> |
Получим таблицу уже с более симпатичным видом. Результат в браузере:
Объединение ячеек таблицы
Объединить строки и ячейки можно с помощью параметров тега <table>, однако при работе с более сложными таблицами понадобиться задействовать параметы тегов <tr> и <td>. За внешнюю рамку отвечает параметр тега <table> - frame, который имеет следующие значения:- void - внешняя рамка таблицы полностью отсутствует.
- above - отображает только верхнюю часть рамки таблицы
- below - отображает только нижнюю часть рамки таблицы
- hsides - отображает только верхнюю и нижнюю части рамки таблицы
- lhs - отображает только левую часть рамки таблицы
- rhs - отображает только правую часть рамки таблицы
- vsides - отображает только левую и правую части рамки таблицы
- box - рамка отображается со всех четырех сторон
За рамки границ ячеек отвечает параметр тега <table> - rules, который имеет следующие значения:
- none - убирает все границы между ячейками в таблице.
- groups - задает границы между группами строк и столбцов
- rows - границы есть только между строками
- cols - границы есть только между столбцами
- all - отображаются все границы
Для примера уберем внешнюю рамку нашей таблицы, а также объединим все ее строки:
|
<table width="600" border="3" bgcolor="pink" align="center" cellspacing="4" cellpadding="8" frame="void" rules="rows"> <caption>Название таблицы</caption> <tr> <th>Имя посетителя</th> <th>Вы знаете язык HTML?</th> <th>Дата последнего посещения</th> </tr> <tr> <td><b>Дмитрий</b></td> <td>Нет</td> <td>1 ноября</td> </tr> <tr> <td>Вероника</td> <td>Да</td> <td>23 января</td> </tr> </table> |
Параметры тегов th tr и td
Формирование таблиц происходит построчно, т.е если задать параметры тегу <tr>, то значение примут все ячейки тегов <td> и <th> в данной строке таблицы. В данных тегах работают все параметры форматирования текста, изображения и т.д. Также можно использовать такие параметры:- align - выравнивает текст в ячейках по горизонтали, имеет такие значения: по правому краю ячейки (right), по левому (left), по центру (center)
- valign - выравнивает текст в ячейках по вертикали, имеет такие значения: текст придерживается верхней части ячейки(top), нижней части (bottom), по центру (middle)
- bgcolor - задает фоновый цвет строки или ячейки
- width - задает ширину ячеек в пикселах или %, где 100% - вся ширина таблицы
- height - задает высоту ячеек в пикселах или %, где 100% - вся ширина таблицы
Если не указывать ширину и высоту ячеек, эти параметры будут автоматически формироваться в зависимости от содержимого таблицы. Отредактируем нашу таблицу таким образом (фрагменты на которые стоит обратить внимание выделены красным):
|
<table width="600" border="3" bordercolor="yellow" bgcolor="pink" align="center" cellspacing="0" cellpadding="8"> <caption>Название таблицы</caption> <tr bgcolor="plum"> <th width="40%">Имя посетителя</th> <th width="20%">Вы знаете язык HTML?</th> <th width="40%">Дата последнего посещения</th> </tr> <tr align="center"> <td bgcolor="red"><b>Дмитрий</b></td> <td>Нет</td> <td>1 ноября</td> </tr> <tr align="center"> <td bgcolor="green"><b>Вероника</b></td> |
В браузере получим такой результат:
Рассмотрим выделенные параметры. В данной таблице 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оздадим небольшую веб-страничку с табличной структурой и поместим в ее основной контент нашу последнюю таблицу:
|
|||||||||||||||
Данная страничка создана с помощью таблицы, с тремя строками и двумя столбцами (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
