В таблицах легко и быстро можно поместить большой объем сложной информации. Но не только этим полезны таблицы в Web. Часто верстку самих веб-страниц делают используя таблицы. Рассмотрим различные таблицы, простые и сложные.

Для лучшего усвоения материала приводимые примеры следует проверять, попрактиковаться на них, и только после продолжать урок.

Пример:

Лук	45
Морковь	63
Картошка	72

В этой таблице 2 столбца и 3 строки. В первом столбце приведены заголовки, во втором – данные.

Для создания такой таблицы нужно набрать:
1. <TABLE>
2. <TR> для создания строки таблицы.
3. <TH> для создания клетки заголовка.
4. Текст заголовка.
5. </TH> для закрытия клетки заголовка.
6. <TD> для создания клетки данных.
7. Данные клетки.
8. </TD> для закрытия клетки данных.
9. </TR> для закрытия строки таблицы.
10. Пункты 2-8 повторить для каждой строки таблицы и клеток этой строки.
11. </TABLE> для завершения создания таблицы.

Пример:

Пятница	Суббота	Воскресенье
45	63	72

В этой таблице 3 столбца и 2 строки. В первой строке приведены заголовки, во второй – данные.

Для создания такой таблицы нужно набрать:
1. <TABLE> - начало таблицы
2. <TR> - начало строки заголовка.
3. <TH> - начало клетки заголовка.
4. Текст клетки заголовка.
5. </TH> - конец клетки заголовка.
6. Повторить пункты 3-5 для каждой клетки заголовка.
7. </TR> - конец строки заголовка.
8. <TR> - начало строки данных.
9. <TD> - начало клетки данных.
10. Текст клетки данных.
11. </TD> - конец клетки данных.
12. Повторить пункты 8-11 для каждой клетки данных.
13. </TR> - конец строки данных.
14. </TABLE> - конец таблицы.

Для отображения линий границ таблицы нужно набрать:
1. В открывающем теге <TABLE> перед символом >:
BORDER
[2]. =n, где n - толщина границы в пикселях.
3. >

Пример:

Отчет о продажах

	Пятница	Суббота	Воскресенье
Лук	45	63	72
Морковь	55	73	78
Картошка	47	34	18

Эта таблица состоит из 4 столбцов и 4 строк. В первой строке и первом столбце – заголовки, в остальных клетках - данные.

Для создания такой таблицы нужно набрать:
1. <TABLE> - начало таблицы.
2. <TR> - начало первой строки.
3. <TH>&nbsp;</TH> - первая пустая клетка первого столбца.
4. <TH> - начало клетки заголовка.
5. Текст клетки заголовка.
6. </TH> - конец клетки заголовка.
7. Пункты 4-6 повторить для каждой клетки первой строки.
8. </TR> - конец строки.
9. <TR> - начало следующей строки таблицы.
10. <TH> - начало клетки заголовка.
11. Текст клетки заголовка.
12. </TH> - конец клетки заголовка.
13. <TD> - начало клетки данных.
14. Текст клетки данных.
15. </TD> - конец клетки данных.
16. Повторить пункты 12-14 для каждой клетки данных.
17. </TR> - конец строки.
18. Повторить пункты 8-16 для каждой строки таблицы.
19. </TABLE> - конец таблицы.

Для создания подписи таблицы нужно набрать:
1. Сразу после открывающего тега <TABLE>, перед другими тегами:
<CAPTION
[2]. ALIGN=x, где x может принять одно из следующих значений: top, bottom, left, right.
3. >
4. Текст подписи таблицы.
5. </CAPTION>.

Таблицу можно группировать по строкам на следующие группы: THEAD, TBODY, TFOOT. То есть возможна горизонтальная группировка таблиц. Посмотрите на следующую таблицу, сравните её внимательно с предыдущими:

	Пятница	Суббота	Воскресенье	Всего:
Лук	15	15	20	50
Морковь	25	10	33	68
Картошка	18	25	15	58
Итого:	58	50	68	176

Для группировки строк таблицы нужно набрать:
1. Перед тегом <TR> первой строки группы:
<THEAD, <TBODY или <TFOOT
[2]. Другие атрибуты, типа BGCOLOR, ALIGN, STYLE.
3. >
4. После последней строки группы, для завершения группировки:
</THEAD>, </TBODY> или </TFOOT>
в зависимости от того, что было выбрано в пункте 1.

{jcomments on}

• < Назад
• Вперёд >