Печать
Категория: Уроки HTML
Просмотров: 2288

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

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

Пример:

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

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

Для создания такой таблицы нужно набрать:
1.


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

Пример:

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

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

Для создания такой таблицы нужно набрать:
1.

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

Для отображения линий границ таблицы нужно набрать:
1. В открывающем теге

перед символом >:
BORDER
[2]. =n, где n - толщина границы в пикселях.
3. >

Пример:

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

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

Для создания такой таблицы нужно набрать:
1.

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

Для создания подписи таблицы нужно набрать:
1. Сразу после открывающего тега

,

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

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

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

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

{jcomments on}