<<Темы

Урок 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>



<<Урок 6 ^ наверх ^ Задание №7Урок 8>>