HTML содержит мало средств верстки. Разместить рядом картинку
и сопровождающий текст невозможно -- после перевода строки текст
располагается ниже картинки. Сверстать текст в две колонки или
отодвинуть блок текста от края окна -- чтобы сделать все это и
не проявлять чудеса изворотливости есть простой путь -- таблички.
Internet Explorer и Netscape Navigator 3.0 позволяют указывать цвет
фона для всей таблицы, ее рядов и ячеек.
Таблица -- конструкция 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>
(Я вижу две)
Разберемся, однако, поподробнее!
Ничего страшного. Программа просмотра автоматически создаст
недостающие пустые ячейки в конце ряда.
Да, можно. Для этого надо указать параметр 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__ |
AAyy | __AAyy__ | AAyy | AAyy |
| tr align=left *** |
| tr align=right *** |
| tr align=center *** |
В чем разница между <td> и <th>?
Как задаются размеры табличек?
А что это за cellpadding и cellspacing?
Что в таблицах плохого?
Netscape
"Все или ничего"
рамки
Это почти одно и то же. Netscape и Mosaic могут специальным образом
(жирный шрифт, выравнивание) изобразить ячейки, обозначенные
<th> </th>, но другие программы могут этого и не делать. Все параметры <td> работают и для <th>.
Обычно программы просмотра автоматически определяют нужную ширину
и высоту таблички. Для того чтобы управлять шириной таблицы и
ее частей используется параметр width флажков <table> и <td>.
ширина может быть указана в пикселах или в процентах:
<table width=400>
<th width = "40%">
(обратите внимание на кавычки во втором примере)
Ширина, указанная в процентах, для флажка <table> определяется относительно границ окна программы просмотра, а для флажка <td> -- относительно ширины таблицы.
Эти параметры флажка <table> работают только в Netscape.
по умолчанию cellpadding = 1 cellspacing = 2
lynx
Текстовая программа просмотра lynx полностью игнорирует табличные
флажки. Поэтому для сохранения читабельности хорошо отделять
содержимое отдельных ячеек флажками параграфов (<p>)
Старые версии Netscape (до 2-ой) содержат ошибку, вызывающую
аварийное завершение программы при попытке изменить размер
окна, содержащего конструкцию "таблица в таблице". Поэтому
лучше эту конструкцию не использовать.
Обычно программы просмотра сначала принимают все компоненты
таблички и только потом целиком отображают ее на экране. Поэтому
большие тексты лучше разбивать на несколько таблиц.
Некоторые создатели Web-страничек злоупотребляют возможностью
заключить табличку в рамку. Наверное они считают это красивым.
С моей точки зрения этого делать не нужно по двум причинам:
Полный синтаксис всех табличных флажков.
(по книге Chuck Musicano & Bill Kennedy
HTML: The Definitive Guide. O'Reilly & Associates, Inc. 1996)
<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>, обязателен