Таблички

HTML содержит мало средств верстки. Разместить рядом картинку и сопровождающий текст невозможно -- после перевода строки текст располагается ниже картинки. Сверстать текст в две колонки или отодвинуть блок текста от края окна -- чтобы сделать все это и не проявлять чудеса изворотливости есть простой путь -- таблички. Internet Explorer и Netscape Navigator 3.0 позволяют указывать цвет фона для всей таблицы, ее рядов и ячеек.
1. основы
2. подробности
3. синтаксис

1. Основы
Таблица -- конструкция HTML, связывающая текст и картинки в ряды, столбцы и ячейки. Таблица может содержать любые элементы HTML, включая multimedia и формы.
Таблица задается с помощью флажков <TABLE> и </TABLE>. Ряды данных задаются флажками <TR> </TR> Ячейки данных задаются флажками <TD> </TD> или <TH> </TH>
Полнокровная табличка получается в результате комбинации только этих трех флажков:
<table>
<tr><td> data1.1 </td> <td> data1.2 </td> </tr>
<tr><td> data2.1 </td> <td> data2.2 </td> </tr>
</table>
Выглядит эта конструкция так:

data1.1

data1.2

data2.1

data2.2

обратите внимание, что таблица состоит из рядов ячеек, то есть ячейка обязательно должна быть частью ряда и не выходить за его границы. Посмотрите на конструкцию внизу. Сколько Вы видите ошибок ?
<table>
<td> data0 </td>
<tr> <td> data 1.1 </td> <td> </tr> data 1.2 </td>
</table>
(Я вижу две)

2. Разберемся, однако, поподробнее!
Что будет, если указать разное количество ячеек в разных рядах?
Можно ли все-таки иметь разное число ячеек в разных рядах?
Как выравниваются текст и картинки в ячейках таблицы?
В чем разница между <td> и <th>?
Как задаются размеры табличек?
А что это за cellpadding и cellspacing?
Что в таблицах плохого?
Полный синтаксис всех табличных флажков.
Что будет, если указать разное количество ячеек в разных рядах?
Ничего страшного. Программа просмотра автоматически создаст недостающие пустые ячейки в конце ряда.
Можно ли все-таки действительно иметь разное число ячеек в разных рядах?
Да, можно. Для этого надо указать параметр colspan во флажке <td>, т.е <td colspan = 2>. Аналогично указав параметр rowspan можно объединить ячейки, соседствующие по вертикали.

cell 1.1 colspan = 2

cell 2.1

cell 2.2 rowspan = 2

cell 3.1

Как выравниваются текст и картинки в ячейках таблицы?
Двумя способами. Во-первых для выравнивания по вертикали можно использовать параметр valign флажка <table>. Этот параметр поддерживается только MS Internet Explorer и для совместимости с Netscape лучше использовать этот же параметр, но с флажками <td>, <tr> <th>.
Во-вторых по горизонтали с помощью параметра align флажков <td>,<th> и <tr>.

td valign =

top

baseline

center

bottom

Baseline__
another line

AAyy

__AAyy__

AAyy

AAyy

tr align=left
***

tr align=right
***

tr align=center
***

В чем разница между <td> и <th>?
Это почти одно и то же. Netscape и Mosaic могут специальным образом (жирный шрифт, выравнивание) изобразить ячейки, обозначенные <th> </th>, но другие программы могут этого и не делать. Все параметры <td> работают и для <th>.
Как задаются размеры табличек?
Обычно программы просмотра автоматически определяют нужную ширину и высоту таблички. Для того чтобы управлять шириной таблицы и ее частей используется параметр width флажков <table> и <td>. ширина может быть указана в пикселах или в процентах: <table width=400> <th width = "40%"> (обратите внимание на кавычки во втором примере) Ширина, указанная в процентах, для флажка <table> определяется относительно границ окна программы просмотра, а для флажка <td> -- относительно ширины таблицы.
А что это за cellpadding и cellspacing?
Эти параметры флажка <table> работают только в Netscape. по умолчанию cellpadding = 1 cellspacing = 2
Что в таблицах плохого?
lynx
Текстовая программа просмотра lynx полностью игнорирует табличные флажки. Поэтому для сохранения читабельности хорошо отделять содержимое отдельных ячеек флажками параграфов (<p>)
Netscape
Старые версии Netscape (до 2-ой) содержат ошибку, вызывающую аварийное завершение программы при попытке изменить размер окна, содержащего конструкцию "таблица в таблице". Поэтому лучше эту конструкцию не использовать. Используя, необходимо обязательно указывать все закрывающие флажки (</td>,</tr>)
"Все или ничего"
Обычно программы просмотра сначала принимают все компоненты таблички и только потом целиком отображают ее на экране. Поэтому большие тексты лучше разбивать на несколько таблиц.
рамки
Некоторые создатели Web-страничек злоупотребляют возможностью заключить табличку в рамку. Наверное они считают это красивым. С моей точки зрения этого делать не нужно по двум причинам:
Это совсем не красиво
Это затрудняет восприятие информации -- рамки визуально отделяют содержимое ячеек друг от друга, а обычно соседние ячейки имеют непосредственное отношение друг к другу.

3. Полный синтаксис всех табличных флажков.
(по книге Chuck Musicano & Bill Kennedy
HTML: The Definitive Guide. O'Reilly & Associates, Inc. 1996)
<table>
<tr>
<td> и <th>
<caption>

<TABLE>

фунция
определяет таблицу
параметры
align
bgcolor (только Internet Explorer и Netscape 3.0)
border
bordercolor (только Internet Explorer)
bordercolordark (только Internet Explorer)
cellpadding (только Netscape)
cellspacing (только Netscape)
hspace
valign (только Internet Explorer)
vspace
width
закрывающий флажок
</table>, обязателен

<TR>

функция
Определяет ряд в таблице
параметры
align
bgcolor (только Internet Explorer и Netscape 3.0)
bordercolor (только Internet Explorer)
bordercolorlight (только Internet Explorer)
bordercolordark (только Internet Explorer)
valign
закрывающий флажок
</tr>, может быть опущен

<TD> и <TH>

функция
Определяет ячейку в таблице
параметры
align
bgcolor (только Internet Explorer и Netscape 3.0)
bordercolor (только Internet Explorer)
bordercolorlight (только Internet Explorer)
bordercolordark (только Internet Explorer)
colspan
nowrap
rowspan
valign
width
закрывающий флажок
</td> или </th>, может быть опущен.

<CAPTION>

функция
определяет заголовок таблицы
параметры
align
valign (только Internet Explorer)
закрывающий флажок
</caption>, обязателен

Возврат к началу страницы

На главную