Печать

В таблицах легко и быстро можно поместить большой объем сложной информации. Но не только этим полезны таблицы в 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.

Добавить комментарий


Защитный код
Обновить

Произведение «OFTOB.COM» публикуется на условиях лицензии Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Непортированная.