Таблицы в HTML

1. Таблицы в HTML

2. Таблицы

Для создания таблиц в языке HTML
используются следующие элементы:
<TABLE> - создаёт таблицу.
<CAPTION> - задаёт заголовок для таблицы.
<TR> - задаёт строку таблицы.
<TH> - задаёт ячейку таблицы, заголовок столбца.
<TD> - задаёт простую ячейку таблицы с
данными.

3. Элемент TABLE

В языке HTML для создания таблиц служит
элемент TABLE.
Весь код таблицы должен располагаться
между тегами <TABLE> и </TABLE>.
Атрибуты этого элемента задают параметры
для всей таблицы целиком.

4. Атрибуты <TABLE>:

Атрибуты <TABLE>:
border - ширина рамки вокруг всей таблицы, например
border=1
bgcolor - определяет цвет фона ячеек таблицы,
например bgcolor=«yellow“
background - позволяет заполнить фон таблицы
рисунком. В качестве значения необходимо указать
URL рисунка, например background=“images/foto.jpg”
bordercolor - Определяет цвет рамки (светлый цвет
для объёмной) bordercolor="blue“

5. Атрибуты <caption>

Атрибуты <caption>
Align=left | center | right
Valign=top | bottom (положение по
вертикали)

6. Атрибуты <tr><th><td>

Атрибуты <tr><th><td>
Bgcolor=#xxxxxx
Backgroung=“имя_а.jpg”Align=left | center | right
Valign=top | midlle | bottom
Для <th><td>
Colspan=n
Rowspan=n

7.

Атрибут colspan
Устанавливает число ячеек, которые
должны быть объединены по горизонтали.
Этот атрибут имеет смысл для таблиц,
состоящих из нескольких строк.

8.

Атрибут rowspan
Устанавливает число ячеек, которые
должны быть объединены по вертикали.
Этот атрибут имеет смысл для таблиц,
состоящих из нескольких строк.

9. ОБЫЧНАЯ ТАБЛИЦА 3X2

10. ДВА ПРИМЕРА С ROWSPAN

11. ПРИМЕР С COLSPAN

12. ДЕМОНСТРАЦИЯ ЗАГОЛОВКОВ (<TH>)

ДЕМОНСТРАЦИЯ ЗАГОЛОВКОВ (<TH>)

13. ДЕМОНСТРАЦИЯ COLSPAN И ЗАГОЛОВКОВ

14. ДЕМОНСТРАЦИЯ МНОЖЕСТВЕННЫХ ЗАГОЛОВКОВ, COLSPAN

15. ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ

16. ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ, ROWSPAN

17. ИСПОЛЬЗОВАНИЕ ROWSPAN/COLSPAN

18. ВЫРАВНИВАНИЕ, ОТСТУПЫ, РАМКИ ТАБЛИЦА БЕЗ РАМКИ

19. ТАБЛИЦА С РАМКОЙ ШИРИНОЙ 10

20. ВЫРАВНИВАНИЕ, ЗАГОЛОВКИ И ПОДТАБЛИЦЫ ALIGN=LEFT | RIGHT | CENTER

21. VALIGN=TOP | BOTTOM | MIDDLE может применяться к отдельным ячейкам или всей строке

22. CAPTION=TOP

23. CAPTION=BOTTOM

24. ЗАДАНИЕ ШИРИНЫ ТАБЛИЦЫ ШИРИНА 50%

25. ЗАДАНИЕ ШИРИНЫ ТАБЛИЦЫ ШИРИНА 100%

26. ЦЕНТРИРОВАНИЕ ТАБЛИЦЫ НА СТРАНИЦЕ

27. HEIGHT=15%

28. Задание