Таблицы. Таблицы являются основным элементом разметки 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 – Таблица с закрашенным фоном ячеек