Таблицы в примерах
Этот документ содержит примеры таблиц. Он охватывает большинство новых тэгов в таблицах. Впрочем он не обязательно показывает некоторые действительно творческие возможности, доступные в таблицах.
ОБЫЧНАЯ ТАБЛИЦА 3X2
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
ДВА ПРИМЕРА С ROWSPAN
Item 1 |
Item 2 |
Item 3 |
Item 4 |
Item 5 | <TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Item 1 |
Item 2 |
Item 3 |
Item 4 |
Item 5 |
Item 6 |
Item 7 | <TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>
ПРИМЕР С COLSPAN
Item 1 |
Item 2 |
Item 3 |
Item 4 |
Item 5 | <TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
ДЕМОНСТРАЦИЯ ЗАГОЛОВКОВ (<TH>)
Head1 |
Head2 |
Head3 |
A |
B |
C |
D |
E |
F | <TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
ДЕМОНСТРАЦИЯ COLSPAN И ЗАГОЛОВКОВ
Head1 |
Head2 |
A |
B |
C |
D |
E |
F |
G |
H | <TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
ДЕМОНСТРАЦИЯ МНОЖЕСТВЕННЫХ ЗАГОЛОВКОВ, COLSPAN
Head1 |
Head2 |
Head 3 |
Head 4 |
Head 5 |
Head 6 |
A |
B |
C |
D |
E |
F |
G |
H | <TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ
Head1 |
Item 1 |
Item 2 |
Item 3 |
Head2 |
Item 4 |
Item 5 |
Item 6 |
Head3 |
Item 7 |
Item 8 |
Item 9 | <TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>
ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ, ROWSPAN
Head1 |
Item 1 |
Item 2 |
Item 3 |
Item 4 |
Item 5 |
Item 6 |
Item 7 |
Item 8 |
Head2 |
Item 9 |
Item 10 |
Item 3 |
Item 11 | <TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
</TR>
</TABLE>
ПРИМЕР ТАБЛИЦЫ ИСПОЛЬЗУЮЩЕЙ ВСЕ ЭТИ ТЭГИ
| |
Average |
| Height |
Weight |
Gender |
Males |
1.9 |
0.003 |
Females |
1.7 |
0.002 | <TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Average</TH></TD>
</TR>
<TR> <TD><TH>Height</TH><TH>Weight</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Gender</TH>
<TH>Males</TH><TD>1.9</TD><TD>0.003</TD>
</TR>
<TR> <TH>Females</TH><TD>1.7</TD><TD>0.002</TD>
</TR>
</TABLE>
ИСПОЛЬЗОВАНИЕ ROWSPAN/COLSPAN
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>
ВЫРАВНИВАНИЕ, ОТСТУПЫ, РАМКИ
ТАБЛИЦА БЕЗ РАМКИ
Item 1 |
Item 2 |
Item 3 |
Item 4 |
Item 5 | <TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
ТАБЛИЦА С РАМКОЙ ШИРИНОЙ 10
Item 1 |
Item 2 |
Item 3 |
Item 4 | <TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>
CELLPADDING И CELLSPACING
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
ВЫРАВНИВАНИЕ, ЗАГОЛОВКИ И ПОДТАБЛИЦЫ
ДЕМОНСТРАЦИЯ MНОЖЕСТВЕННЫХ СТРОК В ТАБЛИЦЫ СТРОК В ТАБЛИЦЕ
January |
February |
March |
This is cell 1 |
Cell 2 |
Another cell, cell 3 |
Cell 4 |
and now this is cell 5 |
Cell 6 | <TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>and now this<br>is cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>
ALIGN=LEFT|RIGHT|CENTER
может применяться к отдельным ячейкам или всей строке
January |
February |
March |
all aligned center |
Cell 2 |
Another cell, cell 3 |
aligned right |
aligned to center |
default, aligned left | <TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR ALIGN=center>
<TD>all aligned center</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD ALIGN=right>aligned right</TD>
<TD ALIGN=center>aligned to center</TD>
<TD>default,<br>aligned left</TD>
</TR>
</TABLE>
VALIGN=TOP|BOTTOM|MIDDLE
может применяться к отдельным ячейкам или всей строке
January |
February |
March |
all aligned to top |
and now this is cell 2 |
Cell 3 |
aligned to the top |
aligned to the bottom |
default alignment, center | <TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR VALIGN=top>
<TD>all aligned to top</TD>
<TD>and now this<br>is cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD VALIGN=top>aligned to the top</TD>
<TD VALIGN=bottom>aligned to the bottom</TD>
<TD>default alignment,<br>center</TD>
</TR>
</TABLE>
CAPTION=TOP|BOTTOM
Верхний заголовок
January |
February |
March |
This is cell 1 |
Cell 2 |
Another cell, cell 3 | <TABLE BORDER>
<CAPTION ALIGN=top>A top CAPTION</CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>
Нижний заголовок
January |
February |
March |
This is cell 1 |
Cell 2 |
Another cell, cell 3 | <TABLE BORDER>
<CAPTION ALIGN=bottom>A bottom CAPTION</CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>
ВЛОЖЕННЫЕ ТАБЛИЦЫ: ТАБЛИЦА ABCD ВНУТРИ ТАБЛИЦЫ 123456
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
ЗАДАНИЕ ШИРИНЫ ТАБЛИЦЫ
ШИРИНА 50%
<TABLE BORDER WIDTH="50%">
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Item width affects cell size |
2 |
3 |
4 | <TABLE BORDER WIDTH="50%">
<TR><TD>Item width affects cell size</TD><TD>2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
WIDTH=100% |
This is item 2 |
3 |
4 | <TABLE BORDER WIDTH="100%">
<TR><TD>WIDTH=100%</TD><TD>This is item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
ЦЕНТРИРОВАНИЕ ТАБЛИЦЫ НА СТРАНИЦЕ
<CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>
ШИРИНА ТАБЛИЦЫ И ВЛОЖЕННЫЕ ТАБЛИЦЫ
<TABLE BORDER WIDTH="50%">
<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>
HEIGHT=15%
<TABLE BORDER WIDTH="50%" HEIGHT="15%">
<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Таблицы
Если размеры ячеек таблиц изначально не заданы, они “подстраиваются” под объем содержимого ячеек.
По умолчанию границы таблиц не отображаются (border=0), чтоб назначить минимальную окантовку, нужно задать border=1.
Столбец 1 |
Столбец 2 |
Столбец 3 |
<table border=1>
<td> Столбец 1 </td>
<td> Столбец 2 </td>
<td> Столбец 3 </td>
</table>
Первая ячейка 1-й строки |
Вторая ячейка 1-й строки |
Первая ячейка 2-й строки |
Вторая ячейка 2-й строки |
<table border=1>
<tr>
<td>Первая ячейка 1-й строки</td>
<td>Вторая ячейка 1-й строки</td>
</tr>
<tr>
<td>Первая ячейка 2-й строки</td>
<td>Вторая ячейка 2-й строки</td>
</tr>
</table>
Рамки таблиц рельефно-двойные. так как по умолчанию атрибут cellspacing=2
Зададим cellspacing=0
Заголовок 1 |
Заголовок 2 |
Содержание 1 |
Содержание 2 |
<table border=1 cellpadding=8 cellspacing=0 bordercolor=black>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Содержание 1</td>
<td>Содержание 2</td>
</tr>
</table>
Город |
Население |
Москва |
10.000.000 |
<table cellpadding="5" cellspacing="5">
<tr>
<th bgcolor="#CCCCCC">Город</th>
<th bgcolor="#CCCCCC">Население</th>
</tr>
<tr>
<td>Москва</td>
<td>10.000.000</td>
</tr>
</table>
Для плавного обтекания таблицы текстом:
Город |
Население |
Москва |
10.000.000 |
Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam…
в первый тег table нужно добавить
style="float: left; margin: 0 5px 2px 0;"
для аналогичного обтекания текстом справа:
style="float: right; margin: 0 0 2px 5px;"
Поместить несколько таблиц в ряд, например:
Город |
Население |
Москва |
10.000.000 |
|
Город |
Население |
Минск |
2.000.000 |
|
Город |
Население |
Киев |
2.000.000 |
|
Код:
<table>
<td> Таблица 1 </td>
<td> Таблица 2 </td>
<td> Таблица 3 </td>
</table>
Город |
Население |
Москва |
10.000.000 |
Минск |
2.000.000 |
Киев |
2.000.000 |
<table cellspacing="5" cellpadding="5">
<tr bgcolor="#aaaaff">
<th>Город</th><th>Население</th>
</tr>
<tr bgcolor="#dddddd">
<td>Москва</td><td>10.000.000</td>
</tr>
<tr bgcolor="#dddddd">
<td>Минск</td><td>2.000.000</td>
</tr>
<tr bgcolor="#dddddd">
<td>Киев</td><td>2.000.000</td>
</tr>
</table>
Заголовок 1 |
Заголовок 2 |
Заголовок 3 |
РЯД 2 |
РЯД 2 |
РЯД 2 |
РЯД 3 |
РЯД 3 |
РЯД 3 |
РЯД 4 |
РЯД 4 |
РЯД 4 |
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</th>
<tr>
<td>РЯД 2</td>
<td>РЯД 2</td>
<td>РЯД 2</td>
</tr>
<tr>
<td>РЯД 3</td>
<td>РЯД 3</td>
<td>РЯД 3</td>
</tr>
<tr>
<td>РЯД 4</td>
<td>РЯД 4</td>
<td>РЯД 4</td>
</tr>
</table>
Цветная ячейка 1 |
Цветная ячейка 2 |
Цветная ячейка 3 |
Цветная ячейка 4 |
<table border="8">
<tr>
<td bgcolor="#00CCFF">Цветная ячейка 1</td>
<td bgcolor="#CC00FF">Цветная ячейка 2</td>
</tr>
<tr>
<td bgcolor="#00FF00">Цветная ячейка 3</td>
<td bgcolor="#FFFF00">Цветная ячейка 4</td>
</tr>
</table>
Цветная ячейка 1 |
Цветная ячейка 2 |
Цветная ячейка 3 |
Цветная ячейка 4 |
<table border="0" cellspacing="5">
<tr>
<td bgcolor="#00CCFF">Цветная ячейка 1</td>
<td bgcolor="#CC00FF">Цветная ячейка 2</td>
</tr>
<tr>
<td bgcolor="#00FF00">Цветная ячейка 3</td>
<td bgcolor="#FFFF00">Цветная ячейка 4</td>
</tr>
</table>
Блогсервисы |
ЖЖ |
Ли.ру |
Диари |
Я.ру |
<table border=5 bordercolor=#FAD0D0 cellpadding=7 width=40%>
<tr>
<td rowspan=2 align=center><b>Блогсервисы</b></td>
<td>ЖЖ</td>
<td>Ли.ру</td>
</tr>
<tr>
<td>Диари</td>
<td>Я.ру</td>
</tr>
</table>
Блогсервисы |
ЖЖ |
Ли.ру |
Диари |
Я.ру |
<table border=5 bordercolor=99CCFF cellpadding=7 width=40%>
<tr>
<td colspan=4 align=center><b>Блогсервисы</b></td>
</tr>
<tr>
<td>ЖЖ</td>
<td>Ли.ру</td>
<td>Диари</td>
<td>Я.ру</td>
</tr>
</table>
Табличным кодом можно задать цветной фон поста:
Теги… Все эти кавычечки, буквочки и скобочки - как узоры следов на снегу. Сначала - неизвестная азбука, а потом, когда вникнешь - книга, прочтение которой не вызывает затруднений. Упоительнейшее занятие - пишешь слово, затем оборачиваешь его замысловатыми иероглифами, кутаешь в слои черно-белых символов и получаешь восхитительнейший результат. © singita |
<table bgcolor="teal" cellpadding="5">
<tr>
<td><font color="white"> TEXT </font></td>
</tr>
</table>
Можно фоном поста сделать картинку:
Спокойной ночи, дорогие друзья мои… |
<table cellpadding=30>
<tr>
<td background=URL картинки><font color=white>TEXT</font></td>
</tr>
</table>
Параметр cellpadding задает оступ текста от границ картинки. Если объем текста превышает размеры картинки, она будет автоматически продублирована нужное число раз (в примере выше 2 раза)
Таблицей можно сделать рамку картинки:
<center><table border="20" bgcolor="brown">
<caption align=bottom>ВАША ПОДПИСЬ</caption>
<tr><td>
<table border="12" bgcolor="brown">
<tr><td><img src=АДРЕС КАРТИНКИ></td></tr>
</table></td></tr>
</table></center>
Размер картинки любой - рамка сама “подгонится”
Быстро наложить текст на картинку без графических редакторов:
<table border="0" cellpadding="0" cellspasing="0">
<tr>
<th width=.. height=.. background="URL КАРТИНКИ" valign="bottom">
<font color="yellow">ВАШ ТЕКСТ</font></th>
</tr>
</table>
В значения width и height вместо многоточий ставятся размеры картинки (их можно узнать из пункта “Свойства” вашей картинки)
Разделить пост на две части можно так:
Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat |
|
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis … |
<table width="100%" cellpadding="0" cellspacing="10" border="0">
<tr>
<td> TEXT1</td>
<td width="2" bgcolor="#000000"></td>
<td> TEXT2</td>
</tr>
</table>
В качестве разделителя служит пустой столбец <td width="2" bgcolor="#000000"></td> , меняя width и bgcolor , меняем цвет и толщину разделителя
Делаем галереи картинок с помощью таблиц:
(здесь использованы кликабельные превьюшки. что и вам советую)
Ее код:
<table cellspacing=8>
<tr>
<td>картинка-один</td>
<td>картинка-два</td>
</tr>
<tr>
<td>картинка-три</td>
<td>картинка-четыре</td>
</tr>
<tr>
<td>картинка-пять</td>
<td>картинка-шесть</td>
</tr>
</table>
Или так:
Код:
<table cellspacing=8>
<tr>
<td>картинка-один</td>
<td>картинка-два</td>
<td>картинка-три </td>
</tr>
<tr>
<td>картинка-четыре</td>
<td>картинка-пять</td>
<td>картинка-шесть</td>
</tr>
</table>
Думаю, принцип понятен. Атрибут cellspacing=8 здесь задает расстояние между картинками, равное 8 пикселов
В начало ↑
ряд 1 ячейка1 | ряд1 ячейка2 |
ряд 2 ячейка 1 | ряд 2 ячейка 2 |
|