Таблицы в HTML используют для показа информации в наглядной табличной форме. Также таблицы используют для разметки web-страниц.
Начинают и заканчивают таблицу тэгами < table > … </ table >.
Тэг < TR > начинает каждую строку таблицы, внутри ряда содержание каждой ячейки начинает тэг < TD >. Поэтому структура таблицы выглядит так:
< table > < TR >
< TD >Ряд 1, ячейка 1< /TD > < TD> Ряд 1, ячейка 2< /TD >
</ TR >
< TR >
< TD> Ряд 2, ячейка 1 </TD > < TD >Ряд 2, ячейка 2< /TD >
</ TR >
</ table >
На экране такая таблица будет выглядеть так:
Ряд 1, ячейка 1 | Ряд 1, ячейка 2 |
Ряд 2, ячейка 1 | Ряд 2, ячейка 2 |
Ячейки 1й строки (ряда) можно оформить как заголовки столбцов:
тэг < TH > начинает каждый заголовок столбца таблицы. Например:
< TR > < TH >заголовок столбца 1 < TH >заголовок столбца 2
Заголовок над всей таблицей задаёт парный тэг <caption> с атрибутами, напр.:
< caption align =" top ">Заголовок таблицы </ caption >
Для установки разных параметров всей таблицы к тэгу <table> добавляют:
|
|
атрибут border =n задаёт толщину рамки вокруг таблицы. По умолчанию толщина =0 (текст стоит в табличной форме, но сетка таблицы не видна).
Например:при < table border =5>вид таблицы такой:
Ряд 1, ячейка 1 | Ряд 1, ячейка 2 |
Ряд 2, ячейка 1 | Ряд 2, ячейка 2 |
атрибут width =n задаёт ширину таблицы в пикселях, или в % по отношению к ширине всего экрана. Например: <table border=1 width=400>
атрибут height =n задаёт высоту таблицы в пикселях,
например: <table height=200 border=1>
атрибут cellpadding =n задаёт поля внутри ячеек таблицы (т.е. текст будет отступать от края ячейки на заданное количество пикселей). По умолчанию эти поля =2 пикселя. Например: <table cellpadding=10 border=1>
атрибут cellspacing =nзадаёт ширину поля между ячейками (тогда у каждой ячейки появится своя рамка, и между этими рамками будет расстояние, заданное атрибутом cellspacing). По умолчанию ширина границ 2 пикселя.
При создании таблиц применяют атрибуты, задающие параметры и для отдельных рядов таблицы (если они заключены между тэгами <TR>..</TR>) или ее ячеек
атрибут align выравнивает содержимое ячеек по горизонтали. По умолчанию содержимое выравнивается по левому краю. Пример:
Тип атрибута | Align=Left | Align=Center | Align=Right |
Вид в таблице | Текст слева | Текст по центру | Текст справа |
атрибут valign выравнивает содержимое ячеек по вертикали. Атрибут может принимать значения top, middle или bottom. По умолчанию – выравнивание middle. Атрибут используется, если высота ячейки больше, чем занимает ее содержимое. Пример:
Тип атрибута | Valign= Top | Valign= Middle | Valign=Bottom |
Вид текста в таблице | Текст вверху ячейки | Текст по середине ячейки | Текст внизу ячейки |
атрибут colspan= n объединяет n ячеек ряда, начиная с данной, в 1 ячейку
|
|
A | B | C |
D | E (данная ячейка занимает два столбца) | |
F | G | H |
В данном случае описание 2го ряда таблицы содержит описание только 2х ячеек (в остальных рядах по 3 ячейки) и выглядит так:
<TR>
<TD>D</TD>
<TD colspan=2>E (данная ячейка занимает 2 столбца)</TD>
</TR>
атрибут rowspan =n объединяет n ячеек столбца, начиная с данной, в 1ячейку
A | B | C |
D | E (данная ячейка занимает 2 ряда) | F |
G | H |
Html-код для создания такой таблицы выглядит так:
< table cellpadding=5 border=1 >
< TR >
< TD>A</TD > < TD>B</TD > < TD>C</TD >
< /TR >
< TR >
< TD > D < /TD >< TD rowspan=2 > E (данная ячейка занимает 2 ряда) </TD>
< TD > F</TD >
< /TR >
< TR >
< TD > G < /TD > < TD > H < /TD >
< /TR > </ table >
атрибут width =n – установка ширины ячейки. Ширина задается в пикселях или в % от ширины всей таблицы.
атрибут height =n – установка высоты ячейки. Задается в пикселях.
ЗАДАНИЕ. Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и далее создадим таблицу номеров телефонов.
Для вставки таблицы, причем с заданной толщиной линий (border) и шириной таблицы (width) введите тег: < table border ="10" width ="100%">
Для заголовка введите: < caption align =" top ">Список телефонов</ caption >
Для задания 1й строки таблицы (с двумя заголовками столбцов) так:
< TR bgcolor =" yellow " align =" center "> < TH >Фамилия < TH >Номер телефона
Создайте следующие строки таблицы, предваряя каждую тегом < TR > и помещая содержимое каждой ячейки после тега < TD >. Заполните 5-10 строк
Последнюю строку задайте так:
< TR > < TD align =" center " colspan ="2"> На 1 этаже здания - бесплатный телефон
Завершите таблицу тегом </ table > Сохраните файл под именем таблица.htm
<html> <head><title> Пример 9 </title></head> <body> <table border=10 width=100%> <caption align="top"> Список телефонов </caption> <TR bgcolor="yellow" align="center"> <TH>Фамилия <TH>Номер телефона <TR> <TD>Иванов <TD>41-23-15 <TR> <TD>Петров <TD>61-20-15 <TR> <TD>Сидоров <TD>70-90-09 <TR> <TD>Кузнецов <TD>61-10-89 <TR> <TD align="center"colspan="2"> На 1этаже здания - бесплатный телефон </table> </body> </html> |
Откройте файл таблица.htm в Internet Explorer.
Изучите, как заданные атрибуты влияют на вид таблицы в браузере.
Измените ширину окна браузера. Как при этом изменяется вид таблицы?