<<Темы
Урок 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>