|
Раздел 2.
Язык гипертекстовой разметки HTML. |
|
|
Таблица состоит из строк и столбцов ячеек, которые могут
содержать текст и рисунки. Таблицы используются для упорядочения и
представления данных.
Для добавления таблицы на веб-страницу используется тег
<table>.
Таблица должна содержать хотя бы одну строку и колонку.
Задать ширину таблицы можно в пикселах и процентах.
Значение, заданное в пикселах, является фиксированным значением.
В этом примере ширина всегда будет занимать 250 пикселов в окне
браузера.
<table width="250"> </table>
Пример самой простой таблицы, имеющей всего одну строку и одну
колонку:
Эта табличка в виде кода выглядит так:
<table border=1 width="250">
<tr>
<td>
Привет :-)
</td>
</tr>
</table>
Для добавления строк используются теги <tr> и </tr>.
Чтобы разделить строки на колонки применяются теги <td> и
</td>.
Таблица с двумя колонками (используем теги <td> и </td>):
Она имеет следующий код:
<table border=1>
<tr>
<td> Привет :-)</td>
<td> Пока! </td>
</tr>
</table>
Для добавления строк используем теги <tr> и </tr>
Данная таблица имеет две стоки и два столбца:
Код таблицы будет выглядеть следующим образом:
<table>
<tr>
<td>Весна</td>
<td>Лето</td>
</tr>
<tr>
<td>Зима</td>
<td>Осень</td>
</tr>
</table>
Параметры таблицы
Для изменения вида и свойств таблицы используется множество
параметров, которые добавляются в теге <table>
<table параметр1=... параметр2=...>
Параметр |
Значение |
Описание |
Пример |
Смотрите |
align= |
left
right
center
|
Выравнивание таблицы |
align=center |
|
width= |
n
n%
|
Минимальная ширина
таблицы, можно задавать в
пикселах или процентах |
width=50% |
 |
height= |
n
n%
|
Минимальная высота
таблицы, можно задавать в
пикселах или процентах |
height=50% |
 |
background= |
URL |
Фоновый рисунок |
background=pic.gif |
 |
bgcolor= |
#rrggbb |
Цвет фона таблицы |
bgcolor=#FF9900
bgcolor=yellow |
 |
border= |
n |
Толщина рамки в пикселах |
border=8 |
 |
bordercolor= |
#rrggbb |
Цвет рамки |
bordercolor=#FE0202 |
 |
cellpadding= |
n |
Расстояние между ячейкой
и ее содержимым |
cellpadding=7 |
 |
cellspacing= |
n |
Дистанция между ячейками |
cellspacing=15 |
 |
frame= |
void
above
below
lhs
rhs
hsides
vsides
box
|
Задание типа рамки таблицы |
frame=hsides |
 |
Параметры ячеек
С помощью параметров ячеек можно изменять вид и оформление таблиц.
Параметры, которые могут быть добавлены к тегам <tr> и
<td>.
Параметр |
Значение |
Описание |
Пример |
Смотрите |
align= |
left
right
center
|
Выравнивание содержимого ячейки |
align=center |
|
background= |
URL |
Устанавливает фоновый рисунок
в ячейке |
background=pic.gif |
 |
bgcolor= |
#rrggbb |
Цвет фона ячейки |
bgcolor=#FF9900 |
 |
valign= |
top
bottom
|
Выравнивание содержимого
ячейки по высоте |
valign=top |
 |
width= |
n
n%
|
Минимальная ширина ячейки,
можно задавать в пикселах
или процентах |
width=30% |
 |
height= |
n
n%
|
Минимальная высота ячейки,
можно задавать в пикселах
или процентах |
height=30% |
 |
Параметры, которые могут быть добавлены только к тегу <td>.
Параметр |
Значение |
Описание |
Пример |
Смотрите |
colspan= |
n
|
Устанавливает размер ячейки
относительно ниже расположенных
колонок;
colspan=2 означает, что ширина
ячейки будет соответствовать ширине
двух колонок. |
colspan=2 |
 |
rowspan= |
n |
Размер ячеек по вертикали
относительно строк.
rowspan=2 устанавливает,
что высота ячейки соответствует
высоте двух строк |
rowspan=2 |
 |
Пример таблицы.
Времена года |
Весна |
Лето |
Осень |
Зима |
Рассмотрим ее код:
<table border=5 bordercolor=#FAD0D0 cellpadding=7
width=40%>
<tr>
<td rowspan=2 align=center><b>Времена
года</b></td>
<td width=20%>Весна</td>
<td width=20%>Лето</td>
</tr>
<tr>
<td>Осень</td>
<td>Зима</td>
</tr>
</table>
В данном случае было задано для всей таблицы:
border=5 - толщина рамки таблицы в 5 пикселей;
bordercolor=#FAD0D0 - цвет рамки таблицы розовый;
cellpadding=7 - расстояние между ячейками и их содержимым;
width=40% - ширина таблицы в процентах от всего окна браузера;
Для ячеек
width=20% - ширина ячейки от всей ширины таблицы. Ширина ячейки
"Весна" будет равна ширине ячейки "Осень".
align=center - размещение текста по центру. По умолчанию текст в
ячейке будет расположен слева.
rowspan=2 - задание высоты ячейки "Времена года" в две строки.
Упражнение
Создайте по образу
скриншота таблицу с соблюдением всех правил оформления таблицы.

©
Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
© 2012 год. При использовании материалов обязательна ссылка на владельца
|