Создание таблиц. Таблицы в HTML используют для показа информации в наглядной табличной форме
Таблицы в 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.
Изучите, как заданные атрибуты влияют на вид таблицы в браузере.
Измените ширину окна браузера. Как при этом изменяется вид таблицы?
Дата добавления: 2015-02-23; просмотров: 964;