<<Темы
Урок 7. Таблицы в HTML
Элемент table
Парный блочный тэг. При помощи него создаются таблицы. Имеет необязательные атрибуты:
width
- ширина всей таблицы (в px или %); по умолчанию ширина определяется браузером, чтобы представить все содержимое
border
- ширина рамки (в px); значения по умолчанию различны, зависят от браузера и его версии
bordercolor
- определяет цвет рамки
align
- горизонтальное выравнивание табличного блока относительно документа; возможны значения left
, right
, center
bgcolor
- определяет цвет фона
background
- задает фоновый рисунок
cellspacing
- промежуток между ячейками в px
cellpadding
- промежуток между содержимым ячейки и рамкой вокруг ячейки в px
unit
- определяет единицы измерения, используемые при
указании размеров как всей таблицы, так и ее отдельных столбцов. Может
принимать три значения:
unit=en
- это значение присваивается по умолчанию и задает единицу измерения,
равную еn-пробелу. Еn-пробел - это типографская единица измерения,
равная ширине буквы n
. Реальный размер пробела зависит от
выбранного шрифта: для крупного шрифта еn-пробел больше, чем для
мелкого. Обычно еn-пробел равен половине размера шрифта.
unit=relative
- используется для задания относительной ширины столбцов в процентах от
общей ширины таблицы. Этот способ следует по возможности применять
вместо указания ширины в процентах, так как он выполняет ту же функцию,
но поддерживается большим количеством броузеров. При задании relative
единиц вводимые числа воспринимаются как ширина столбцов в процентах.
unit=pixels
- это значение применяется, когда вам нужно точно знать ширину столбца
на экране. В этом случае лучше всего задать ее в пикселях.
colspec
- определяет, сколько места занимает каждый
столбец таблицы и как в нем выравниваются данные. Используется в
совокупности с тэгом unit
. Этот тэг просто перечисляет
все столбцы и для каждого из них задает выравнивание и размер. Для
столбца (или ячейки) существует пять способов выравнивания: l
- по левому краю, c
- по центру, r
- по правому краю, j
- по правому и левому краю и d
- по десятичной запятой.
dp
- определяет символ, используемый для отделения целой части десятичной дроби.
frame
- этот редко используемый атрибут указывает, какие
части внешней рамки должны быть видны. Он может принимать следующие
значения:
void
- не показывать внешнюю рамку (принято по умолчанию, если border=0)
above
- показывать только верхнюю границу
below
- показывать только нижнюю границу
hsides
- показывать только левую и правую границы
vsides
- показывать только верхнюю и нижнюю границу
lhs
- показывать только левую границу
rhs
- показывать только правую границу
box
или border
- показывать внешнюю рамку полностью (принято по умолчанию, если border>0)
rules
- этот редко используемый атрибут указывает, какие
части внутренней рамки должны быть видны. Он может принимать следующие
значения:
none
- не показывать внутреннюю рамку (принято по умолчанию, если border=0)
groups
- показывать только границы между группами строк и столбцов
rows
- показывать только границы между строками
cols
- показывать только границы между столбцами
all
- показывать внутреннюю рамку полностью (принято по умолчанию, если border>0)
<table width=90 unit=relative border=1 bordercolor=navy
colspec="l10 c15 r20 j25 d30" align=center bgcolor=aqua cellpadding=4
cellspacing=0 dp=".">
Элемент tr
Парный тэг. Создает строку таблицы (сокращение от Таble Row - строка таблицы). Если в таблице содержится два набора тэгов tr
,
в ней будут две строки. Весь текст, другие тэги и атрибуты, которые вы
хотите поместить в одну строку, должны быть помещены между тэгами tr
. Изменить параметры конкретной строки можно с помощью:
align
- горизонтальное выравнивание в ячейках строки (значения left
, right
, center
, justify
)
valign
- вертикальное выравнивание содержимого строки (значения top
, middle
, bottom
)
bgcolor
- цвет фона строки
background
- фоновый рисунок
<tr align=justify valign=middle bgcolor=#ffffff>
Элементы th, td
Парные тэги. Внутри строки таблицы обычно размещаются ячейки с
данными. Каждая ячейка, содержащая текст или изображение, должна быть
окружена тэгами td
(либо th
). Число тэгов td
или th
в строке определяет число ячеек. Единственное различие между этими двумя тэгами - данные, заключенные между тэгами th
,
браузер обычно выводит более выделенными, поэтому как правило их
используют для создания первой строки с заголовками колонок. Тэги th
и td
имеют одинаковые атрибуты:
nowrap
- подавляет перенос слов, т.е. все данные ячейки будут выводиться на экран в одну строку
rowspan
- число строк, охваченных ячейкой
colspan
- число колонок, охваченных ячейкой
align
- горизонтальное выравнивание содержимого ячейки (left
, right
, center
, justify
и bleedleft
- прижимает содержимое ячейки вплотную к левому краю)
valign
- вертикальное выравнивание содержимого ячейки (top
, middle
, bottom
)
width
- ширина ячейки в px или %
height
- высота ячейки в px или %
bgcolor
- цвет фона ячейки
background
- фоновый рисунок ячейки
<td nowrap rowspan=3 align=center width=200 height=50 bgcolor=#b0e5ff>
В итоге применяя полученные знания можно создавать как простые, так и сложные таблицы. К примеру, такую таблицу:
|
2000 |
2001 |
2002 |
Нефть |
43 |
51 |
79 |
Золото |
29 |
34 |
48 |
Дерево |
38 |
57 |
36 |
создать очень просто. Вот код:
<table width=100% border=2 cellspacing=0 cellpadding=2>
<tr bgcolor="#6699cc">
<td> </td><td>2000</td><td>2001</td><td>2002</td>
</tr>
<tr>
<td>Нефть</td><td>43</td><td>51</td><td>79</td>
</tr>
<tr>
<td>Золото</td><td>29</td><td>34</td><td>48</td>
</tr>
<tr>
<td>Дерево</td><td>38</td><td>57</td><td>36</td>
</tr>
</table>