HTML Урок 5. Создание таблицы в html

Цель урока: создание и оформление таблицы в html

Создание таблицы в HTML

Рассмотрим теги для создания таблицы:

1
2
3
4
5
<table>
	<tr>
		<td> содержание </td>
	</tr>
</table>

Результат:
пример таблицы html
Добавим границу для таблицы — атрибут border:

1
2
3
4
5
<table border="1">
	<tr>
		<td> содержание </td>
	</tr>
</table>

Результат:
простая таблица html пример

Создания таблицы начинается с тега table (от англ. «таблица»). Тег tr служит для создания строки. В строке располагаются ячейки — тег td. Завершается таблица закрывающим тегом /table

создание таблицы в html
Или пример таблицы посложнее:
html таблица пример

Атрибуты тега TABLE

align left — таблица влево;
center – табл. по центру;
right — табл. вправо.
width 400
50%
bоrdеr ширина
bordercolor цвета рамки
сеllspacing ширина грани рамки
cellpadding внутреннее расстояние до рамки
bgсоlоr Цвет
#rrggbb
bасkground файл (фон таблицы)

Важно: Для ячеек-заголовка таблицы используется тег th вместо td. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TR — строки

align left, center, right выравнивание по горизонтали
valign top, middle, bottom, baseline выравнивание по вертикали
bgcolor цвет задний фон
bordercolor цвет цвет границы

Атрибуты тега TD или TH — ячейки

align left, center, right выравнивание по горизонтали
valign top, middle, bottom, baseline выравнивание по вертикали
width число или процент ширина ячейки
bgcolor цвет цвет фона
background файл файл фона
bordercolor цвет цвет границы
nowrap заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой

Важно:

  • Тег caption служит для создания заголовка таблицы
  • Для группировки заголовочных ячеек используется тег thead
  • Для группировки основного содержимого таблицы используется тег tbody
  • Тег tfoot определяет нижнюю часть таблицы


Тег caption заголовка таблицы может иметь атрибут, определяющий расположение заголовка — align — со следующими значениями:
top — заголовок над таблицей,
bottom — заголовок под таблицей,
left — заголовок вверху и выровнен влево,
right — заголовок вверху и выровнен вправо. К сожалению не все значения «работают» во всех браузерах.
заголовок таблицы
Пример: Создать «каркас» таблицы со всеми тегами группировки

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table  border="1">
<caption>таблица</caption>
<thead>
	<tr>
	<th>Заголовок 1</th><th>3аголовок 2</th>
	</tr>
</thead>
<tbody>
	<tr>
	<td>содержимое</td><td>содержимое</td>
	</tr>
</tbody>
<tfoot>
...
</tfoot>
</table>

Объединение ячеек в таблице

В происходит при помощи двух атрибутов тега td: COLSPAN — объединение ячеек по горизонтали, ROWSPAN — объединение ячеек по вертикали.

Синтаксис COLSPAN:
html объединение ячеек в таблице пример

1
2
3
4
<table border="1" width="50%">
<tr><td colspan="2"> </td></tr>
<tr><td> </td><td> </td></tr>
</table>

Синтаксис ROWSPAN:
html объединение ячеек в таблице пример

1
2
3
4
<table border="1" width="50%">
<tr><td rowspan="2"> </td><td> </td></tr>
<tr><td> </td></tr>
</table>

Пример: создать таблицу по образцу на картинке. Использовать слияние ячеек
таблицы html примеры

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
<table  border="1">
<caption>таблица с объединенными ячейками </caption>
<tr>
<th rowspan="2">&nbsp;</th>
<th colspan="2">3аголовок 1</th>
</tr>
<tr><th> заголовок 1.1</th><th> заголовок 1.2</th></tr>
<tr><th> заголовок 2</th>
<td> ячейка 1</td><td> ячейка 2</td></tr>
<tr><th> заголовок 3</th>
<td> ячейка 3</td><td> ячейка 4</td></tr>
</table>

Лабораторная работа: создайте таблицы, с расположенными в их ячейках цифрами, точно по образцу:
задание html таблицы

Группировка ячеек: COLGROUP

Элемент colgroup позволяет создавать группы колонок с одинаковыми свойствами.

Рассмотрим на примере:

Пример: Создать таблицу по образцу
группировка ячеек html

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<TABLE border="4">
<colgroup >
	<col span="2" width="30" style="background-color: green" />
	<col width="60" style="background-color: blue" />
</colgroup>
<colgroup style="background-color:red">
	<col span=2 width="120"/>
</colgroup>
<TR>
<TD> 1-1 </TD><TD> 1-2 </TD><TD> 1-3 </TD><TD> 1-4 </TD><TD> 1-5</TD>
</TR>
<TR>
<TD> 2-1 </TD><TD> 2-2 </TD><TD> 2-3 </TD><TD> 2-4 </TD><TD> 2-5 </TD>
</TR>
</table>

Атрибуты тега COLGROUP

align выравнивание содержимого столбца

  1. left — по левому краю (по умолчанию)
  2. center — по центру
  3. right — по правому краю

не работает в Firefox

dir определяет направление символов:

  1. ltr — слева направо
  2. rtl — справа налево

не работает в Firefox

span количество столбцов, к которым будет применяться оформление (по умолчанию 1)
style задает встроенную таблицу стилей
valign вертикальное выравнивание в ячейке таблицы

  1. bottom — по нижнему краю ячейки
  2. middle — по центру ячейки (по умолчанию)
  3. top — по верхнему краю ячейки

не работает в Firefox

width ширина столбца

HTML вложенные таблицы

Таблицы со сложной структурой проще заменять на вложенные таблицы.

Пример: создайте вложенные таблицы по образцу:
html вложенные таблицы

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
<TABLE border="4">
<tr><td bgcolor="yellow">Таблица 1</td>
<td bgcolor="yellow">
<TABLE border=2 bgcolor="#FFFFFF">
<tr><td>Таблица 2</td> <td>Ячейка 2-2</td></tr>
<tr><td>Ячейка 3-2</td> <td>Ячейка 4-2</td></tr>
</TABLE>
</td>
<tr><td bgcolor="yellow">Ячейка 3-1</td>
<td bgcolor="yellow">Ячeйкa 4-1</td></tr>
</TABLE>

Лабораторная работа:

  • Создайте таблицу с фиксированными размерами, содержащую ячейки указанной на рисунке ширины
  • Вставьте в левую нижнюю ячейку вложенную таблицу
  • Фон ячеек вложенной таблицы сделайте серым

вложенные таблицы html примеры


Лабораторная работа:

  • Откройте задание, выполненное на прошлой лабораторной работе
  • Добавьте в верхнюю ячейку еще одну вложенную таблицу
  • Фон ячеек вложенной таблицы сделайте белым

задание вложенные таблицы html

Поделитесь уроком с коллегами и друзьями:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить