2010-07-31

Создаем сложную таблицу HTML

    Кроме обязательных тегов, используемых в таблице, таких как <table>, <tr> и <td>, о которых говорилось в предыдущем сообщении, параметры таблицы задаются такими прерменными, как ALIGN, BGCOLOR, BORDER, BORDERCOLOR, CELLPADDING, CELLSPACING, HEIGHT, WIDTH, COLSPAN, NOWRAP, ROWSPAN, VALIGN. Остановимся на них подробнее.    Сначала рассмотрим те, которые задают параметры самой таблицы:


ALIGN - Выравнивание таблицы по правому (right) или левому (left) краю.
BGCOLOR - цвет фона таблицы.  
BORDER - толщина бордюра в пикселях.  
BORDERCOLOR - цвет бордюра.  
CELLPADDING - расстояние между бордюром и содержимым ячейки.  
CELLSPACING - расстояние между двумя рамками таблицы (т.к. по умолчанию, таблица имеет двойную рамку, и если задать значение cellspacing=0, то рамка будет одинарная.
HEIGHT - высота таблицы, может измеряться как в пикселях ( в этом случае единицу измерения опускаем, т.е. например, height="100", так и в % (тогда это будет выглядеть следующим образом: height="100%").
WIDTH - ширина таблицы, так же как и высота измеряется в пикселях и в процентах.
style="float: left; margin: 0 5px 2px 0;" - обтекание таблицы текстом слева,
style="float: right; margin: 0 0 2px 5px;" - обтекание таблицы текстом справа.
    Параметры ячеек таблицы:
 ALIGN - так же означает выравнивание содержимого ячеек таблицы.
BGCOLOR - цвет фона ячейки,
BORDERCOLOR - цвет рамки ячейки,
COLSPAN - число ячеек таблицы, объединенных по горизонтали, таким образом можно задать, например, шапку таблицы.
NOWRAP - заставляет содержимое ячейки отображаться в ней без переноса по строке.
ROWSPAN - показывает число ячеек, объединенных по вертикали.
VALIGN - вертикальное выравнивание содержимого ячейки. Переменные: top - по верхнему краю, middle - по середине, bottom - по нижнему краю.
Пример таблицы, с объединенными ячейками по вертикали. 
Содержимое, объединенных по вертикали Ячейка 1 строки1 Ячейка 2 строки1
Ячейка 1 cтроки 2 Ячейка 2 cтроки 2
.. <table border="3" borderColor="#008080" align="Left" width="45%" height="100" CellPadding="2" CellSpacing="2">  
<tr>
<td rowspan=2 align=center>Содержимое, объединенных по вертикали</td>
 <td>Ячейка 1 строки1</td>
 <td>Ячейка 2 строки1</td></tr>
 <tr> 
<td>Ячейка 1 cтроки 2 </td>
<td>Ячейка 2 cтроки 2</td> 
</tr></table>     

Содержимое объединенных по горизонт.
Ячейка1 строки1 Ячейка2 строки2 Ячейка3 второй строки
Пример таблицы, с объединенными ячейками по горизонтали. 
<table border="3" borderColor="#008080" align="Left" width="100" height="100" CellPadding="2" CellSpacing="2"> 
 <tr> <td colspan=2 align=center> Содержимое объединенных по горизонт.</td></tr>
<tr> 
<td>Ячейка1 строки1</td>  
<td>Ячейка2 строки2</td> <td>Ячейка3 второй строки</td> </tr> </table>

 P.S. Не стоит забывать о том, что не все теги и не все параметры HTML могут адекватно отображаться на Вашей страницы. Это в первую очередь, зависит, от выбранного Вами блогохостинга, а также может зависить от браузера.

Комментариев нет :

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности