Учебник: Html и Самиздат

Таблица задается тэгом <table> ... </table>. Строки в таблице – тэгом <tr> ... </tr>, а ячейки внутри строк – <td> ... </td>.

Все элементы таблицы находятся внутри тэга <table> ... </table>.

Пример:

<table border="2">

<tr>

<th> Заголовок 1 </th>

<th> Заголовок 2 </th>

</tr>

<tr>

<td> 1 ячейка </td>

<td> 2 ячейка </td>

</tr>

<tr>

<td> 3 ячейка </td>

<td> 4 ячейка </td>

</tr>

<table>

Заголовок 1

Заголовок 2

1 ячейка

2 ячейка

3 ячейка

4 ячейка

Тэг <th> ... </th> определяет ячейку-заголовок. Отличается от <td> ... </td> тем, что текст в этой ячейке будет жирным и центрированным.

У таблицы есть куча параметров. Пока мы рассмотрим параметры тэга <table>:

border – определяет ширину границы для таблицы. Прописывается в тэге <table>. По умолчанию не задан, то есть границы не выводятся (border="0" – то же самое). Причем, если border отличен от нуля, то границы прорисовываются для всех ячеек. Кстати, используя стили (CSS), можно задать border и для ячеек или вообще убрать.

bordercolor – цвет border'a. По умолчанию серый. Если цвет не задан, то граница выводится как бы объемной. Такой эффект создается за счет того, что левая и верхняя граница светлее, чем нижняя и правая. Их тоже можно раскрасить.

bordercolorlight – цвет левой и верхней границы (только для IE).

bordercolordark – цвет нижней и правой границы (только для IE). Кстати, эти параметры повлияют и на цвет рамки вокруг ячеек. Тут все будет наоборот – левая и верхняя границы окрасятся в bordercolordark, а нижняя и правая – в bordercolorlight. Если border не задан или равен нулю, то естественно ничего раскрасить мы не сможем.

bgcolor – задает цвет фона для таблицы.

background – определяет фоновый рисунок для таблицы. Его значением является URL, по которому находится рисунок. Этот рисунок будет многократно размножен по вертикали и горизонтали.

align – выравнивание. Может принимать значения: left, center, right. По умолчанию выравнивание производится по левому краю. Когда align="left", текст обтекает таблицу справа, align="right", обтекание слева. Чтобы прервать обтекание текстом и начать его вывод под таблицей, достаточно написать <br clear="all">. Если align="center", обтекания не происходит, текст выводится над и под таблицей.

cellspacing – задает расстояние между ячейками таблицы в пикселях. По умолчанию равен двум (для IE). Если вы не хотите, чтобы вокруг каждой ячейки рисовалась рамка, задайте cellspacing="0", тогда таблица будет расчерчена одинарными линиями по горизонтали и вертикали.

cellpadding – задает отступ от границ ячейки в пикселях до элемента внутри нее. По умолчанию равен одному (для IE). Чтобы текст не прилегал слишком близко к границам ячейки (некрасиво ведь), задайте cellpadding побольше. Например, десять.

width и height – определяют ширину и высоту таблицы в пикселях, либо в процентах от ширины окна браузера. В принципе, браузер выводит таблицу, автоматически подгоняя размеры под ее содержимое, поэтому, если заданные ширина и высота меньше, чем требуется, то они будут проигнорированы. Таблица может иметь подпись-заголовок, она задается тэгом <caption> ... </caption>. Пишется сразу после тэга <table>. Имеет параметр align. По умолчанию заголовок расположен по центру над таблицей (align="top"). Рассмотрим другие варианты:

align="bottom" – заголовок расположен под таблицей по ее центру.

align="left" – заголовок расположен над таблицей слева.

align="right" – заголовок расположен над таблицей справа. Не знаю, как в других браузерах, а в 6-м IE возможно и такое:

valign="bottom" align="left" – заголовок расположен под таблицей слева.

valign="bottom" align="right" – заголовок расположен под таблицей справа. Браузер не будет выводить таблицу, пока не скачает все ее содержимое и не поймет, как оно там расположено. Как следствие, не надо делать слишком большие таблицы – раз, все рисунки внутри таблицы обязательно должны иметь параметры width и height – два.

Параметры тэга <tr>:

bordercolor – цвет border'a для всех ячеек в строке. По умолчанию такой же, как и у всей таблицы.

bordercolorlight – цвет нижней и правой границы всех ячеек в строке (только для IE).

bordercolordark – цвет левой и верхней границы всех ячеек в строке (только для IE). Как мы видим, эти параметры действуют как бы наоборот, чем для всей таблицы.

bgcolor – задает цвет фона для всех ячеек в строке.

align – задает горизонтальное выравнивание для текста в ячейках строки. Может принимать значения: left, center, right. По умолчанию align="left".

valign – задает вертикальное выравнивание для текста в ячейках строки. Может принимать значения: top, middle, bottom. По умолчанию valign="middle" (по центру).

height – определяет высоту ячеек строки в пикселях, либо в процентах от высоты всей таблицы.

Параметры тэга <td> (для <th> то же самое):

bordercolor, bordercolorlight, bordercolordark – цвет border'a для конкретной ячейки. По умолчанию такие же, как и у всей таблицы или как у строки, если для той заданы эти параметры. Подробное объяснение смотрите выше.

bgcolor – цвет фона для конкретной ячейки.

background – определяет фоновый рисунок для конкретной ячейки. Его значением является URL, по которому находится рисунок. Этот рисунок будет многократно размножен по вертикали и горизонтали.

align и valign – горизонтальное и вертикальное выравнивание для текста в конкретной ячейке. По умолчанию такие же, как у строки, в которой находится ячейка. Подробное объяснение смотрите выше.

width и height – определяют ширину и высоту ячейки в пикселях, либо в процентах от ширины и высоты таблицы. Если значения width и height меньше, чем требуется для отображения содержимого ячейки, то они будут проигнорированы. Задав высоту ячейки больше, чем высоту строки, мы добьемся того, что все ячейки в строке будут иметь такую высоту.

nowrap – запрещает браузеру автоматический перенос текста в ячейке, когда тот не помещается в ее границах. Не имеет присваиваемых значений.

colspan – количество столбцов, на которые простирается ячейка. По умолчанию равен единице.

rowspan – количество строк, на которые простирается ячейка. По умолчанию равен единице. Пример colspan и rowspan:

<table border="1">

<tr>

<td colspan="2">1/1</td>

<td rowspan="2">1/2</td>

<td>1/3</td>

</tr>

<tr>

<td>2/1</td>

<td>2/2</td>

<td>2/3</td>

</tr>

</table>

1/1

1/2

1/3

2/1

2/2

2/3

Границы пустой ячейки не отображаются. Исправить это очень легко – запишите в ячейку символ неразрывного пробела (&nbsp;).

Можно, кстати, вместо этого указать ширину (width) или высоту (height) ячейки. Либо всё сразу. Но если все ячейки будут такими, то вы вообще не увидите никаких границ. А если поиздеваться таким образом лишь над некоторыми ячейками, вы сможете увидеть подобную картину:

В первом случае у таблицы не указан цвет рамки (bordercolor). Во втором случае bordercolor ="#555555".

Вот код таблички, у которой не был указан цвет рамки:

<table border="1" bgcolor="#DDDDDD" cellspacing="0"

</table>

Поговорим о том, как задать цвет фона документа, в параметрах тега body вы не сможете сделать это, т.к. СИ удаляет этот тег.

Делаем так: создаем таблицу <table> с одной строкой <tr> и ячейкой <td>, которая будет обрамлять весь документ. Задаем в параметрах тега table цвет фона таблицы (bgcolor), цвет рамки (bordercolor) сделайте таким же (если не хотите, чтобы рамка выделялась). Вы можете вообще не указывать параметр border, или указать, что border="0". Тогда не придется прописывать значение bordercolor. Обязательно пропишите в тэге <table> такие параметры: width="100%" и height="100%". Таблица растянется на всю ширину и высоту окна браузера. Сам текст документа поместите в ячейку аблицы, между тегами <td> ... </td>. Если вы не укажете width и height, то ширина и высота таблицы будут определяться по тексту, помещенному в нее.

Текст по умолчанию выравнивается: вертикально – по центру таблицы, и с левого края по горизонтали. Если вы хотите сделать другое выравнивание, используйте параметры align и valign. Их можно применить как для всей строки (<tr>), так и для отдельной ячейки (<td>).

Если вы хотите, чтобы у вас в документе было несколько цветов, например, полоса для заголовка, для подписей внизу, для основного текста, то, соответственно, строк (<tr>) будет три. В параметрах тега <tr> можно задать цвет фона и рамки каждой строке. Также можно задать цвет фона и обрамляющей рамки каждой ячейке (<td>).

Советую еще раз внимательно перечитать параграф "таблицы". Все параметры и прочее – расписаны. Экспериментируйте. А теперь пример:

<table cellspacing="0" cellpadding="10" bgcolor="#A7BEE9" width="100%" height="100%">

<tr align="center" valign="top">

<td> текст текст текст </td>

</tr>

<table>

текст текст текст

С помощью таблицы элементарно делается эпиграф к произведению. Создадим таблицу с одной ячейкой, запишем туда текст эпиграфа, выровняем таблицу по правому краю. Сделать это можно двумя способами:

<table align="right"> ... </table>

<div align="right"><table> ... </table></div>

Если эпиграф – это какое-либо стихотворение, то больше ничего делать не требуется, а если текст, то его надо поместить в тэг <div align="justify"> ... <div>. Для предложения сгодится и <p align="justify"> ... <p>. Однако на следующие предложения он уже не подействует, так что используйте <div>. Для не стихотворных эпиграфов можно поменять обычную гарнитуру на рубленый шрифт, уменьшив при этом размер. Для стихотворного – по желанию.

Если предложение длинное, да еще не одно, нужно указать ширину таблицы в пикселях (можно и в процентах), потому что если опустить этот параметр, таблица примет размер по самому длинному абзацу и растянется на весь экран. Что совсем не похоже на эпиграф, не так ли? Пример:

<div align="right">

<dd>Текст эпиграфа. Текст эпиграфа.

<dd>Текст эпиграфа. Текст эпиграфа.

</div>

Обратите внимание на тэг <dd> в начале каждого абзаца эпиграфа. Красная строка требуется и здесь. Для коротенького предложения красная строка, естественно, не нужна.

Почему в примере для выравнивания таблицы по правому краю использован тэг <div> с параметром align, а не такой же параметр тэга <table>? Дело в том, что таблица, как и рисунок (<img>) может обтекаться текстом слева (align="right") или справа (align="left"). Вы сами должны позаботиться о прекращении обтекания текстом, написав <br clear="all">. Таблица, имеющая выравнивание по центру (align="center"), текстом не обтекается. В общем, если у вас много разных таблиц, гораздо лучше равнять их с помощью тэга <div>, не боясь увидеть на экране нечто странное.

Все стихи в тексте оформляются в виде таблиц с выравниваем по центру. Размер шрифта при этом обязательно уменьшается, обычная гарнитура меняется на рубленую. Пример:

<div align="center">

1-я строка стиха.

<br>2-я строка стиха.

<br>n-я строка стиха.

</div>

Тут я пишу <div> исключительно по привычке. Если <div align="center"> заменить на <div align="right">, таблица со стихом прижмется к правому краю. Вот вам и готовый шаблон стихотворения-эпиграфа. Вот вам и польза привычки – быстрая изменяемость кода. В эпиграфе без <div> не обойтись.

Значение параметра face в этих примерах дано без кавычек, потому что иначе СИ выкинет его, и никакого изменения гарнитуры у вас не получится. В примерах, где значение параметра face взято в кавычки, само это слово написано заведомо неправильно, ранее я предупреждал об этом.