Лекция: А как можно объединить ячейки?
Для этого существуют данные атрибуты.
COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
Пример 1:
<table border=«1»>
<tr>
<td colspan=«2»>ряд 1 ячейка 1+2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td><td>ряд 2 ячейка 2</td>
</tr>
</table>
Получим в браузере:
| ряд 1 ячейка 1+2 | |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Пример 2:
<table border=«1»>
<tr>
<td rowspan=«2»>Ячейка 1, ряд 1+2</td>
<td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
Получим в браузере:
| Ячейка 1, ряд 1+2 | ряд1 ячейка2 |
| ряд 2 ячейка 2 |
Ничего сложного нет. Присмотритесь внимательно к трем примерам и все станет ясно.
Вот еще полезные атрибуты:
CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом.
CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html.
WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.
Пример 1:
<table border=«1» cellpadding=«10»>
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td><td>ряд 2 ячейка 2</td>
</tr>
</table>
Результат в браузере:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Пример 2:
<table border=«1» cellspacing=«10»>
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td><td>ряд 2 ячейка 2</td>
</tr>
</table>
Результат в браузере:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Пример 3:
<table border=«1» width=«400» height=«100»>
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td><td>ряд 2 ячейка 2</td>
</tr>
</table>
Результат в браузере:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
И наконец последние четыре атрибута:
ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left.
VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы.Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу, и установить посередине).
BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
Примечание: можно хоть каждой ячейке таблицы задать свой цвет фона или фоновый рисунок. Но:если вы задаете фоновый цвет (или рисунок) в базовом элементе TABLE то во всех ячейках будет этот фон(рисунок), и если вы захотите в какой-то ячейке поменять, пропишите соответсвующий атрибут именно для этой ячейки.
Приведу пример:
<!-- задаем ширину, высоту, рамку, выравнивание по центру и фоновый цвет всей таблицы-->
<table width=«400» height=«100» border=«1» align=«center» bgcolor="#FFF8D2">
<tr>
<!-- эту ячейку оставляем по умолчанию-->
<td>ряд 1 ячейка1</td>
<!-- содержимое горизонтально выравниваем по центру, вертикально — прижимаем к верху-->
<td align=«center» valign=«top»>ряд1 ячейка2</td>
</tr>
<tr>
<!-- содержимое горизонтально выравниваем по центру, вертикально — прижимаем к низу-->
<td align=«center» valign=«bottom»>ряд 2 ячейка 1</td>
<!-- содержимое горизонтально выравниваем по правому краю, вертикально — посередине, и меняем фоновый цвет-->
<td align=«right» valign=«middle» bgcolor="#33FF99">ряд 2 ячейка 2</td>
</tr>
</table>
Результат в браузере:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Еще один пример:
<!-- задаем ширину, высоту, рамку, фоновый цвет всей таблицы, выравнивание оставляем по умолчанию(по левому краю)-->
<table width=«400» height=«100» border=«1» bgcolor="#FFF8D2">
<tr>
<!-- горизонтальное-по центру, вертикально по умолчанию(по центру)-->
<td align=«center»>ряд 1 ячейка1</td>
<!-- горизонтальное-по центру, вертикально по умолчанию(по центру) и делаем фоновый рисунок-->
<td align=«center» background=«pchela.jpg»>ряд1 ячейка2</td>
</tr>
<tr>
<!-- горизонтальное-по центру, вертикально по умолчанию(по центру)-->
<td align=«center»>ряд 2 ячейка 1 </td>
<!-- горизонтальное-по центру, вертикально по умолчанию(по центру) и меняем фоновый цвет-->
<td align=«center» bgcolor="#33FF99">ряд 2 ячейка 2</td>
</tr>
</table>
Результат в браузере:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Если картинка меньше чем ячейка, то она будет дублироваться, как показано в примере. Если больше — то будет отображаться та часть которая влезет :) .
НУ вот впринципе и всё по таблицам. Если не получилось запомнить не расстраивайтесь. С практикой все запомнится(как говорят главное знать, где подсмотреть!). В программе Adobe Dreamweaver все делается очень просто.