< на главную

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

<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="цвет"

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

<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

Атрибут не работает во многих браузерах. Ниже расположена таблица, показывающая в каких местах и в каких браузерах можно наблюдать эффект.
  Mozilla_Firefox_3.6 Opera_11 Internet_Explorer_8 Safari_5.0 Google_Chrome_9
table V - V V V
tr - - V V V
td - - V - -
к оглавлению



г) 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

Параметр также можно применять к ряду или ячейке. (Если применить к ряду, то не сработает в IE8).
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 и IE8.) (Также существует значение 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 - англ. край, граница, кайма
к оглавлению
Примечание: хм... vsides и hsides как будто перепутаны...


м) 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>, но её содержимое отображается полужирным шрифтом и выравнивается по центру. Может обладать всеми теми же атрибутами, что и <td>. Закрывающий тег также необязателен. (th - table header cell - англ. ячейка заголовка) Пример:

<table width=200 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. (Значения right и left не работают в Safari5 и GHr9, а в MF3.6, Opera11 и IE8 функционируют по-разному.)
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>

Позволяет применить к каждому столбцу таблицы отдельное форматирование. Параметры форматирования одного столбца можно растянуть на несколько соседних с помощью атрибута span="число_столбцов". Удобно задавать ширину ячеек. Такие вещи, как определение посредством дескриптора <col> выравнивания и фонового цвета, поддерживаются в одних браузерах, но отсутствуют в других. Любопытно, что если ширина ячеек таблицы одновременно задаётся и через дескриптор <col>, и непосредсвенно в самих ячейках, то находится среднее арифметическое данных конкурирующих соотношений - и это во всех браузерах. Пример:

<table border=1 width=500>
    <col width=50%>
    <col span=2 width=100>
    <col>
    <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 
<table border=1 width=500>
    <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
1х11х2
2х12х2
1х11х2
2х12х2
к оглавлению



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

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

<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


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

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