Таблицы. Таблицы являются основным элементом разметки html страниц

 

Таблицы являются основным элементом разметки html страниц. С их помощью определяются зоны, в которых на странице будут располагаться объекты. В ячейках таблицы могут помещаться рисунки, текст, списки, ссылки, другие таблицы и т.д.

Таблица задается тэгом:

<table> (</table>)

 

Таблица состоит из строк и столбцов (ячеек), поэтому их надо указать:

<tr></tr> - строка таблицы;

<td></td> - столбец (ячейка) таблицы.

 

Сначала следует задавать строки (пусть их будет две):

<table>

<tr></tr>

<tr></tr>

</table>

 

Затем в каждой строке задаются столбцы (ячейки):

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

 

Теперь надо заполнить получившийся каркас:

<table>

<tr>

<td>1x1</td>

<td>1x2</td>

<td>1x3</td>

</tr>

<tr>

<td>2x1</td>

<td>2x2</td>

<td>2x3</td>

</tr>

</table>

 

Первая цифра в этих записях - это номер ряда, а вторая - номер столбца (1х2 - первый ряд, второй столбец и т.д.).

Если посмотреть, что уже получилось, то это будет выглядеть так:

 

1x1	1x2	1x3
2x1	2x2	2x3

Фон таблицы задается параметром bgcolor="цвет фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В следующем примере зададим фон для каждого столбца.

<table>
<tr>
<td bgcolor="FFCC33">1x1</td>
<td bgcolor="336699">1x2</td>
<td bgcolor="FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="336699">2x1</td>
<td bgcolor="FFCC33">2x2</td>
<td bgcolor="336699">2x3</td>
</tr>
</table>

Параметрыheightи width можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В примере зададим ширину и высоту в пикселях для столбцов (ячеек):

<table>
<tr>
<td height="35" width="50" bgcolor="FFCC33"> 1x1 </td>
<td width="50" bgcolor="336699"> 1x2 </td>
<td width="50" bgcolor="FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="336699"> 2x1 </td>
<td width="50" bgcolor="FFCC33"> 2x2 </td>
<td width="50" bgcolor="336699"> 2x3 </td>
</tr>
</table>

 

Если в ряду задается для какого-либо столбца (ячейки) высота большая, чем для других, то все ячейки (столбцы) ряда станут по высоте равными наибольшей. То же самое с рядами: если задать для какого-то ряда наибольшую длину, то все остальные ряды выровняются по наибольшему ряду.

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

Теперь осталось лишь выровнять содержимое внутри таблицы:

 

<table>

<tr>

<td height="35" width="50" bgcolor="FFCC33"> <center> 1x1 </center> </td>

<td width="50" bgcolor="336699"> <center> 1x2 </center> </td>

<td width="50" bgcolor="FFCC33"> <center>1x3 </center> </td>

</tr>

<tr>

<td height="35" width="50" bgcolor="336699"> <center> 2x1 </center> </td>

<td width="50" bgcolor="FFCC33"> <center> 2x2 </center> </td>

<td width="50" bgcolor="336699"> <center> 2x3 </center> </td>

</tr>

</table>

 

В каждой ячейке (столбце) могут находиться и картинки, и текст, и даже другие таблицы (в этом случае такие таблицы называются - вложенными).

Тэги, которые применяются для форматирования текста - те же, что для обычного текста.

Тэги для центрирования текста могут прописываться в каждой ячейке.

Вертикальное выравнивание задается атрибутом valign="middle" , т.е. содержимое конкретной ячейки будет находиться в середине ячейки (top - наверху или bottom - внизу).

 

Пример:

<table>

<tr>

<td height="35" width="50" bgcolor="FFCC33" valign="top">

<center>1x1</center> </td>

<td width="50" bgcolor="336699"> <center>1x2</center> </td>

<td width="50" bgcolor="FFCC33" valign="bottom"> <center>1x3</center>

</td>

</tr>

<tr>

<td height="35" width="50" bgcolor="336699" valign="bottom">

<center>2x1</center> </td>

<td width="50" bgcolor="FFCC33"> <center>2x2</center> </td>

<td width="50" bgcolor="336699" valign="top"> <center>2x3</center>

</td>

</tr>

</table>

Таблица может создаваться с рамкой. Рамка вводится параметром border. Зададим рамку шириной 3 пикселя: <table border="3">.

Результат показан на рисунке 23.1.

Рисунок 23.1 – Таблица с закрашенным фоном ячеек