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

Дата публикации: 26 ноября 2016

Цель урока: создание и оформление таблицы в 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>

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).

Таблица с областями группировки
Столбец 1 Столбец 2 Столбец 3 Столбец 4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

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

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

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

1
2
3
4
5
6
7
8
9
<table>
<tr>
  <td colspan="2"> </td>
</tr>
<tr>
  <td> </td>
  <td> </td>
</tr>
</table>

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

1
2
3
4
5
6
7
8
9
<table>
<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
13
14
15
16
17
18
19
20
21
<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>

Лабораторная работа №2: создайте таблицы, с расположенными в их ячейках цифрами, точно по образцу:
задание 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
12
13
14
<TABLE border="4" bgcolor="yellow">
<tr>
   <td>Таблица 1</td>
   <td>
      <TABLE>
      <tr>  <td>Таблица 2</td><td>Ячейка 2-2</td>  </tr>
      <tr>  <td>Ячейка 3-2</td><td>Ячейка 4-2</td> </tr>
      </TABLE>
   </td>
<tr>
   <td>Ячейка 3-1</td>
   <td>Ячeйкa 4-1</td>
</tr>
</TABLE>

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

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

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


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

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

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

Поделитесь уроком с коллегами и друзьями:[SvenSoftSocialShareButtons]
One Comment

    Алексей

    сложно

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

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

*
*


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