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

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

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

1
2
3
4
5

<table>
	<tr>
		<td> содержание </td>
	</tr>
</table>

Результат:

Добавим границу для таблицы — атрибут border:

1
2
3
4
5

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

Результат:

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

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

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

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

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

Тег 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:

1 2 3 4 5 6 7 8 9

<table> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

<table> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

Синтаксис ROWSPAN:

1 2 3 4 5 6 7 8 9

<table> <tr> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table>

<table> <tr> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table>

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

Выполнение:

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: создайте таблицы, с расположенными в их ячейках цифрами, точно по образцу:

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

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

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

Пример: Создать таблицу по образцу

Выполнение:

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

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>