< на главную

Конспект простейшей таблицы

<table border=1>
<tr>
<tr>
<td> ... </td> <td> ... </td> <td> ... </td>
<td> ... </td> <td> ... </td> <td> ... </td>
</tr>
</tr>
</table>

Закрывающие теги </tr> и </td> можно упустить, таким образом получается
<table border=1>
<tr>
<tr>
<td> ... <td> ... <td> ...
<td> ... <td> ... <td> ...
</table>

(table - англ. таблица
tr - table row - англ. табличный ряд
td - table data cell - англ. информационная ячейка)


Разделы

1. Атрибуты
а) height, width
б) border
в) bordercolor
г) bgcolor
д) bordercolordark, bordercolorlight
е) background
ё) cellpadding
ж) cellspacing
з) align
и) valign
й) colspan
к) rowspan
л) frame
м) rules
н) nowrap
о) title

2. Дополнительные дескрипторы:
а) <th>
б) <caption>
в) <thead>, <tbody>, <tfoot>
г) <col>
д) <colgroup>




Атрибуты

а) height="цифра", width="цифра"

Высота и ширина таблицы или её отдельных ячеек. Выражаются в пикселях или в процентах.
к оглавлению



б) border="цифра"

Толщина внешней рамки таблицы. (border - англ. край, граница, кайма) По умолчанию =0. При установке border>0 также становятся видны рамки ячеек. Примеры:

<table>
    <tr><td>1х1
        <td>1х2
    <tr><td>2х1
        <td>2х2
</table>
1х1 1х2
2х1 2х2 
<table border=1>
    <tr><td>1х1
        <td>1х2
    <tr><td>2х1
        <td>2х2
</table>
1х1 1х2
2х1 2х2 
<table border=10>
    <tr><td>1х1
        <td>1х2
    <tr><td>2х1
        <td>2х2
</table>
1х1 1х2
2х1 2х2
к оглавлению



в) bordercolor="цвет"

Цвет границ. В зависимости от расположения атрибут определяет цвет линии, ограничивающей таблицу и/или ячейку. (Не работает в Oper-е.) Пример:

<table border=1 bordercolor=blue>
    <tr><td>1х1
        <td>1х2
        <td>1х3
    <tr bordercolor=yellow><td>2х1
        <td>2х2
        <td bordercolor=red>2х3
</table>
1х1 1х2 1х3
2х1 2х2 2х3
к оглавлению



г) bordercolordark="цвет", bordercolorlight="цвет"

Несколько изменяют начертание отдельных линий таблицы, придавая ей эффект трёхмерности. Работают только в IE. Сравните: 
<table border=1>
    <tr><td>1х1<td>1х2
    <tr><td>2х1<td>2х2
</table>
1х11х2
2х12х2 
<table border=10>
    <tr><td>1х1<td>1х2
    <tr><td>2х1<td>2х2
</table>
1х11х2
2х12х2 
<table border=1 bordercolor=blue>
    <tr><td>1х1<td>1х2
    <tr><td>2х1<td>2х2
</table>
1х11х2
2х12х2 
<table border=10 bordercolor=blue>
    <tr><td>1х1<td>1х2
    <tr><td>2х1<td>2х2
</table>
1х11х2
2х12х2 
<table border=1 bordercolordark=blue>
    <tr><td>1х1<td>1х2
    <tr><td>2х1<td>2х2
</table>
1х11х2
2х12х2 
<table border=10 bordercolordark=blue>
    <tr><td>1х1<td>1х2
    <tr><td>2х1<td>2х2
</table>
1х11х2
2х12х2 
<table border=1 bordercolorlight=blue>
    <tr><td>1х1<td>1х2
    <tr><td>2х1<td>2х2
</table>
1х11х2
2х12х2 
<table border=10 bordercolorlight=blue>
    <tr><td>1х1<td>1х2
    <tr><td>2х1<td>2х2
</table>
1х11х2
2х12х2
к оглавлению



д) bgcolor="цвет"

Цвет фона. (bgcolor - background color - англ. цвет заднего фона) С помощью данного атрибута можно изменить фоновый цвет всей таблицы, строки или отдельной ячейки - в зависимости от того, в какой именно дескриптор его вставить. Пример:

<table border=1 bgcolor=blue>
    <tr><td>1х1
        <td>1х2
        <td>1х3
    <tr bgcolor=yellow><td>2х1
        <td>2х2
        <td bgcolor=red>2х3
</table>
1х1 1х2 1х3
2х1 2х2 2х3
к оглавлению



е) background="адрес_рисунка"

В качестве фона используется изображение. Размещается методом мозайки. (background - англ. задний план, фон) Пример:

<table border=1 background=pic.jpg>
    <tr><td>1х1
        <td>1х2
        <td>1х3
    <tr><td>2х1
        <td>2х2
        <td>2х3	
    <tr><td>3х1
        <td>3х2
        <td>3х3	
</table>
1х1 1х2 1х3
2х1 2х2 2х3
3х1 3х2 3х3
к оглавлению



ё) cellpadding="цифра"

Минимально возможный отступ между внутренней границей ячейки и её содержимым. (cell - англ. клетка, ячейка; padding - англ. набивка, набивочный материал) По умолчанию =1. Пример:

<table border=1 cellpadding=20>
    <tr><td>1х1
        <td>1х2
    <tr><td>2х1
        <td>2х2
</table>
1х1 1х2
2х1 2х2
к оглавлению



ж) cellspacing="цифра"

Величина пространства между ячейками таблицы. (cell - англ. клетка, ячейка; spacing - англ. промежуток, интервал) По умолчанию =2. Пример:

<table border=1 cellspacing=20>
    <tr><td>1х1
        <td>1х2
    <tr><td>2х1
        <td>2х2
</table>
1х1 1х2
2х1 2х2
к оглавлению



з) align="значение"

Горизонтальное выравнивание содержимого ячеек. Возможные значения: left/center/right/justify. (ВНИМАНИЕ: значение justify не воспринимается IE7.) (Также существует значение char, но его смысл я не поняла.) По умолчанию используется left. Для выравнивания содержимого ячеек данный атрибут должен быть помещён либо в <tr>, либо в <td>, либо к какой-то вспомогательный дескриптор, поскольку при размещении в <table> он регулирует уже расположение самой таблицы.
к оглавлению



и) valign="значение"

Вертикальное выравнивание содержимого ячеек. Возможные значения сведены в таблицу (смысл baseline мне не понятен). По умолчанию используется middle.
bottom1х1
middle2х1
top3х1
baseline3х1
к оглавлению



й) colspan="цифра"

Объединение нескольких ячеек по горизонтали. (colspan - column span - англ. ≈ перекрывать стоблцы) Пример:

<table border=1>
    <tr><td colspan=2>1х1
    <tr><td>2х1
        <td>2х2
</table>
1х1
2х1 2х2
к оглавлению



к) rowspan="цифра"

Объединение нескольких ячеек по вертикали. (rowspan - row span - англ. ≈ перекрывать ряды) Пример:

<table border=1>
    <tr><td>1х1
        <td rowspan=2>1х2
    <tr><td>2х1
</table>
1х1 1х2
2х1
к оглавлению



л) frame="значение"

Определяет, какие именно стороны внешней рамки будут видны. (frame - англ. каркас, остов, рамка) Используется только с дескриптором <table>. Возможные значения:

ЗначениеОбъяснениеborder не указан (т.е. =0)при border=1при border=10Дословный перевод
по умолчанию
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
void рамка не отображается
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
void - англ. пустота, вакуум, пробел
above только верхняя граница
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
above - англ. наверху, сверху, над
below только нижняя граница
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
below - англ. внизу, под
hsides верхняя и нижняя границы
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
horizontal - англ. горизонтальный
sides - англ. стороны
lhs только левая граница
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
left - англ. левый
horizontal - англ. горизонтальный
side - англ. сторона
rhs только правая граница
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
right - англ. правый
horizontal - англ. горизонтальный
side - англ. сторона
vsides левая и правая границы
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
vertical - англ. вертикальный
sides - англ. стороны
box рамка отображается полностью
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
box - англ. коробка, ящик
border то же самое, что и box
1х11х2
2х12х2
1х11х2
2х12х2
1х11х2
2х12х2
border - англ. край, граница, кайма
к оглавлению



м) rules="значение"

Определяет, какие именно границы между ячейками должны отображаться. (rules можно перевести как разграничители, линейки) (ВНИМАНИЕ: при использовании атрибута rules также рекомендуется явно определить атрибут border, поскольку в ином случае различные браузеры могут отображать или не отображать внешнюю границу.) Возможные значения атрибута rules сведены в нижерасположенную таблицу:

ЗначениеОбъяснениеborder не указан (т.е. =0)при border=1Дословный перевод
по умолчанию
1х11х2
2х12х2
1х11х2
2х12х2
 
none внутренние границы не отображаются
1х11х2
2х12х2
1х11х2
2х12х2
none - англ. никто, ничто, никакой
rows только границы между строками
1х11х2
2х12х2
1х11х2
2х12х2
rows - англ. ряды
cols только границы между столбцами
1х11х2
2х12х2
1х11х2
2х12х2
cols - columns - англ. столбцы
all все внутренние границы
1х11х2
2х12х2
1х11х2
2х12х2
all - англ. все
groups только границы между группами См. примеры к дескрипторам <thead>... и <colgroup> groups - англ. группы
к оглавлению



м) nowrap

Запрет браузеру автоматически разбивать содержимое данной ячейки на несколько строк. Действует только внутри <td>, с другими табличными дескрипторами не работает. Пример можно посмотреть здесь.
к оглавлению



о) title="текст"

Позволяет прикрепить к соответствующей ячейке, строке или таблице всплывающее окно с текстом. Пример:

<table border=1>
    <tr title="Первая строка"><td>1х1
        <td>1х2
    <tr><td title="Ячейка 2х1">2х1
        <td>2х2
</table>
1х1 1х2
2х1 2х2
к оглавлению







Дополнительные дескрипторы

а) <th> ... </th>

Ячейка заголовка. Заменяет собой <td> ... </td>, может обладать теми же атрибутами, но её содержимое отображается более заметным образом. Как правило, с помощью полужирного начертания. Закрывающий тег необязателен. (th - table header cell - англ. ячейка заголовка) Пример:

<table border=1>
    <tr><th>1х1
        <th>1х2
    <tr><td>2х1
        <td>2х2
</table>
1х1 1х2
2х1 2х2
к оглавлению



б) <caption> ... </caption>

Заголовок таблицы. (caption - англ. заголовок) Простейший пример-схема:

<table width=200 border=1>
    <caption>Мой_заголовок</caption>
    <tr><td>1х1
        <td>1х2
    <tr><td>2х1
        <td>2х2
</table>
Мой_заголовок
1х1 1х2
2х1 2х2
Может содержать атрибут align="значение", регулирующий расположение данного заголовка. Возможные значения приведены ниже. По умолчанию используется top. (Будьте особенно внимательны со значениями left и right, их обработка различными браузерами может значительно отличаться.)
top
Мой_заголовок
1х1 1х2
2х1 2х2
bottom
Мой_заголовок
1х1 1х2
2х1 2х2
left
Мой_заголовок
1х1 1х2
2х1 2х2
right
Мой_заголовок
1х1 1х2
2х1 2х2
к оглавлению



в) <thead> ... </thead>, <tbody> ... </tbody>, <tfoot> ... </tfoot>

Данные дескрипторы позволяют разбить строки таблицы на несколько логически целыных частей, к каждой из которых можно применить отдельное форматирование, а также визуально разделить их посредством записи rules=groups. Дескрипторов <tbody> может быть несколько. Закрывающие дескрипторы необязательны. (Oper-ой данные дескрипторы обрабатываются лишь частично.) Пример:

<table border=1 width=150 rules=groups>
    <thead>
        <tr><td>1х1<td>1х2
    <tbody>
        <tr><td>2х1<td>2х2
        <tr><td>3х1<td>3х2
    <tbody bgcolor=white align=right>
        <tr><td>4х1<td>4х2
        <tr><td>5х1<td>5х2
    <tfoot>
        <tr><td>6х1<td>6х2
</table>
1х11х2
2х12х2
3х13х2
4х14х2
5х15х2
6х16х2
к оглавлению



г) <col>

Позволяет применить к каждому столбцу таблицы отдельное форматирование. Не работает в Mozill-е, в Oper-е - частично. Параметры форматирования одного столбца можно растянуть на несколько соседних с помощью атрибута span="число_столбцов". Пример:

<table border=1 width=300>
    <col>
    <col bgcolor=yellow>
    <col span=2 bgcolor=blue align=right>
    <tr><td>1х1<td>1х2<td>1х3<td>1х4
    <tr><td>2х1<td>2х2<td>2х3<td>2х4
</table>
1х11х21х31х4
2х12х22х32х4
к оглавлению



д) <colgroup> ... </colgroup>

Позволяет объединить несколько дескрипторов <col>, задав им общие атрибуты. Также с помощью записи rules=groups можно визуально отделить группы столбцов друг от друга. Закрывающий тег необязателен. В Oper-е работают лишь отдельные эффекты данного элемента. Пример:

<table border=1 rules=groups>
    <colgroup align=right>
        <col width=160>
        <col width=120>
    </colgroup>
    <colgroup bgcolor=yellow>
        <col width=80>
        <col width=40>
    </colgroup>
    <tr><td>1х1<td>1х2<td>1х3<td>1х4
    <tr><td>2х1<td>2х2<td>2х3<td>2х4
</table>
1х11х21х31х4
2х12х22х32х4


< на главную к оглавлению

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