Таблицы — окончание

таблицыПродолжим освоение таблиц. Рассмотрим параметры оставшихся табличных тегов <tr>,<td> и <th>.
Часть параметров данных тегов действуют аналогично действию параметров тега <table>, к ним относятся следующие:
align, background, bgcolor, bordercolor, height и width, и затрагивать их не будем.

Параметр colspan — показывает число объединённых по горизонтали ячеек. Его применяют, когда число горизонтальных ячеек больше единицы, и относят его к тегам <td> и <th>. Рассмотрим пример:

<table width="200" border="1"  cellpadding="4" cellspacing="0">
<tr>
<td colspan="3">Ячейка 1</td>
</tr>
<tr>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td colspan="2">Ячейка 5</td>
<td>Ячейка 6</td>
</table>
А вот результат:
параметр colspan

Как видите — в первой строке обьеденены три ячейки, а в третьей строке — две.

Параметр rowspan — отвечает за объединение ячеек по вертикали и также относится к тегам <td> и  <th>. Его действия аналогичны действиям параметра colspan, только по высоте. Вот и пример:

<table width="350" border="2" align="center"
cellpadding="6" cellspacing="0">
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td rowspan="3">Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</table>

Результаты на скриншоте:
параметр rowspan

Параметр nowrap — запрещает перенос текста внутри ячеек. К применению данного параметра надо относиться очень аккуратно, ведь нерасчётливое отображение текста в одну строку может привести к увеличению размера таблицы и появлению полосы прокрутки. Рассмотрим наглядно:
<table width="200" align="center"  border="2">
<tr>
<td nowrap>Как видите, ширина таблицы больше указанных 200px</td>
</tr>
</table>

Получилось вот что:
параметр nowrap

На рисунке видно, что таблица увеличилась в ширину до примерно 300 пикселов.

Параметр valign — отвечает за вертикальное выравнивание содержимого таблицы. Имеет следующие значения:
middle — выравнивает содержимое по середине.
top — прижимает к верхней рамке строи.
baseline — ориентирует содержимое по определённой(базовой) линии.
bottom — прижимает всё к нижнему краю строки.
Рассмотрим пример:
<table width="350" border="1">
<tr>
<td valign="top" height="150">Выравнивание по верху</td>
<td valign="bottom">Выравнивание по нижней кромке</td>
</tr>
</table>

Действие данного кода видим на рисунке:
параметр valign

Работая с таблицами, необходимо учитывать несколько нюансов:
У каждого атрибута любого тега существует значение по-умолчанию, и даже, если атрибут не указан, значение по-умолчанию всегда действует. Поэтому необходимо знать эти значения, чтобы получить ту таблицу, которая Вам необходима.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha