Html. Таблицы и границы.

мая.21.2008     Web-программирование > XHTML, CSS, SSI     (0)

На этом уроке мы поговорим о таблицах и их границах. Научимся строить таблицы различных типов и размеров, окрашивать их, задавать размеры таблиц и др.

Любая HTML таблица начитается с тега table. Для него можно задавать несколько параметров, таких как ширина, border, расположение и др. Рассмотрим простейший пример:

<table border=1 cellspacing=2 cellpadding=5 width=”50%” align=”Center”>
<tr>
<td>Тут текст</td>
</tr>
</table>

border это размер границы таблицы(окантовка), cellspacing – растояние от одного до другого края окантовки, cellpadding – расстояние внутри таблицы, от ближнего края до содержимого, align – расположение таблицы в окне браузера (center, left, right, top…). width – ширина таблицы, если ширина указана в процентах, то это означает процентное соотношение размера окна браузера к размеру таблицы. Очень удобно использовать % в width если дизайн верстается под разные разрешения экрана. height – высота ячейки.
<tr></tr> – строки таблицы
<td></td> – столбцы таблицы

Цвет ячеек и таблицы в целом определяет – bgcolor.

Пример окрашенной таблицы:

<table bgcolor=”#fffccc”>
<tr>
<td>Тут текст</td>
<td>Тут текст</td>
</tr>
<tr>
<td>Тут текст</td>
<td>Тут текст</td>
</tr>
</table>

Пример окрашенной ячейки:

<table>
<tr>
<td bgcolor=”#fffccc”>Тут окрашенный цвет ячейки</td>
</tr>
<tr>
<td>Тут обычный цвет ячейки</td>
</tr>
</table>

Можно задавать размер для каждой ячейки. Как и для таблицы, это осуществляется атрибутом width. Содержимое каждой ячейки можно выравнивать. Это осуществляется атрибутом align. Также можно выровнить содержимое по центру, поместив его в теги между тегами <center> и </center>.
Вертикальное выравнивание осуществляется атрибутом valign, который может принимать значения: middle, top, bottom. Расстояние между ячейками определяется атрибутом cellspacing, по умолчанию cellspacing=”2″.
Пример:

<table border=”0″ cellspacing=”0″>
<tr>
<td bgcolor=”#3366FF” height=”35″ width=”50″ valign=”top”> <center>1×1</center> </td>
<td bgcolor=”#61646B” width=”50″ align=”center”>1×2</td>
<td bgcolor=”#3366FF” width=”50″ valign=”bottom”> <center>1×3</center> </td>
</tr>
<tr>
<td bgcolor=”#61646B” height=”35″ width=”50″ valign=”bottom”> <center>2×1</center> </td>
<td bgcolor=”#3366FF” width=”50″> <center>2×2</center> </td>
<td bgcolor=”#61646B” width=”50″ valign=”top”> <center>2×3</center> </td>
</tr>
</table>

Бывают ситуации когда нужно сделать одну ячейку в размер двух. Для этого нужно использовать атрибуты colspan и rowspan. Colspan объединяется в строках, rowspan в столбцах. Пример:

<table cellspacing=”0″>
<tr>
<td bgcolor=”#61646B” height=”35″ colspan=”2″> <center>1×1</center> </td>
<td bgcolor=”#3366FF” width=”50″ rowspan=”2″> <center>1×2</center> </td>
</tr>
<tr>
<td bgcolor=”#3366FF” height=”35″ width=”50″ > <center>2×1</center> </td>
<td bgcolor=”#61646B” width=”50″> <center>2×2</center> </td>
</tr>
</table>

Цвет окантовки таблицы указывается в атрибуте bordercolor. Обратите внимание на то, что этот атрибут обрабатывается не всеми браузерами, например браузер opera игнорирует это атрибут. Пример:

<table border=”2″ bordercolor=”red”>
<tr>
<td bgcolor=”#61646B” height=”35″ colspan=”2″> Текст </td>
<td bgcolor=”#3366FF” width=”50″ rowspan=”2″> Текст </td>
</tr></table>

Вот в общем-то и всё, что я хотел рассказать в ходе этого урока.