|
Прежде чем приступать к табличной верстке страниц
посредством html, необходимо изучить как
создавать сами таблицы. Для описания таблиц в html используется три основных тэга:<table>, <tr>, <td>. Тэг <table> </table> собственно и определяет начало и конец таблицы. Тэг <tr> отвечает за формирование строк в таблице. Тэг <td> прописывает ячейки таблицы. Каждая строка таблицы (элемент <tr> </tr>) может содержать в себе одну или несколько ячеек (<td> </td>). Проще всего реализовать создание правильной таблицы, которая бы содержала одинаковое количество ячеек всех строках и во всех столбцах Пример (примитивная таблица с заданными параметрами ширины в 50%, границ 2px и выравниванию по центру страницы): <table width="50%" border="2" align="center"> <tr> <td>ячейка1</td><td>ячейка2</td> </tr> <tr> <td>ячейка3</td><td>ячейка4</td> </tr> </table>
Но такие правильные таблицы на практики встречаются очень редко. Часто возникает необходимость растянуть некоторые ячейки на несколько столбцов или строк. Для этих целей в таблице предусмотрены атрибуты rowspan (число строк на которые растягивается данная ячейка вправо, по горизонтали) и colspan (число столбцов, на которые растягивается данная ячейка вниз, по вертикали). Причем, одна и та же ячейка может быть растянута как по вертикали, так и по горизонтали. Пример <table align="center" border="3" width="80%" bordercolor="#000000">
Атрибуты тэга <table> Align........... задает параметры выравнивания самой таблицы в документе; width.......... задает рекомендуемую ширину таблицы; Height........ атрибут указывающий рекомендуемую высоту таблицы; Border....... управляет видимостью и толщиной рамки вокруг таблицы и видимостью рамки вокруг каждой ячейки; Cellspacing ...указывает расстояние в пикселах между смежными ячейками (а точнее между их рамками) как по горизонтали, так и по вертикали; Cellpadding ..указывает размер отступа (по горизонтали и по вертикали) в пикселах между рамкой и содержимым ячейки; Bordercolor ..этот атрибут определяет цвет рамок в таблице; Bgcolor...... задает цвет фона на всем пространстве, занимаемом таблицей — на одержимом ячеек и на свободном пространстве между ними; id, class...... идентификаторы в пределах документа; lang, dir...... информация о языке и направленности текста; title ............ заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое таблицы); style .......... встроенная информация о стиле; onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup................................................................. внутренние события. С некоторыми атрибутами мы уже познакомились (см. код таблицы), а остальные прописываются аналогично.
Атрибуты тэга <tr> Align, char, charoff, valign.......... атрибуты выравнивания; Bgcolor...... атрибут, задающий цвет фона ячеек, содержащей его строки; id, class...... идентификаторы в пределах документа; lang, dir...... информация о языке и направленности текста; title ........... заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое документа); style .......... встроенная информация о стиле; onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup....................................................... внутренние события.
Атрибуты тэга <td> и <th> Rowspan.... атрибут, отвечающий за объединение соседних ячеек в столбце; Colspan...... атрибут, отвечающий за объединение соседних ячеек в строке; Nowrap..... логический атрибут, наличие которого запрещает разбивать содержимое ячейки на несколько строк; Width......... атрибут, указывающий браузеру рекомендуемую ширину ячейки в пикселах; Height........ атрибут, указывающий браузеру рекомендуемую высоту ячейки в пикселах; Align, char, charoff, valign.....атрибуты выравнивания; Bgcolor...... атрибут, задающий цвет фона внутри ячейки; id, class...... идентификаторы в пределах документа; lang, dir...... информация о языке и направленности текста; title ............ заголовок элемента (выводится браузером в качестве комментария при наведении курсора на содержимое элемента); style ........... встроенная информация о стиле; onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup....внутренние события.
Теперь, когда мы знаем всё о таблицах в html, можно приступать и к табличной верстке страниц. Внимательно изучите код представленный ниже. Для удобства восприятия кода, каждая таблица выделена своим цветом.
<table width="70%"
align="center"> <tr> <td><center> <font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif"><b>Broadband Boogie Woogie</b> </font></center> </td> </tr>
</table> <tr> <td bgcolor="#FFFF00" width="90%">This is your web site. Six pages. Ready to go. I wasted time on them soyou don't have to.</td> <td bgcolor="#FF0000"></td> </tr>
</table> <tr> <td width="20%" align="center"><a href="#">- About Me - </a></td> <td width="20%" align="center"><a href="#"> - Journa -</a></td> <td width="20%" align="center"><a href="#"> - Cam -</a></td> <td width="20%" align="center"><a href="#"> - Contact -</a></td> <td align="center"><a href="#">- Links -</a></td>
</tr> <tr height="20"> <td bgcolor="#FF0000" width="5%"> </td>
<td rowspan="5" bgcolor="#FFFFFF"><p>This
layout is dedicated to one of my favorite artists, <a href="http://www.artchive.com/artchive/M/mondrian.html">Piet
Mondrian</a> </td>
</tr>
</table>
<br /><br /><br
/>
| ||||||||||||||||||||||||||||||||||||||
