HTML ячейки, таблицы

HTML объединение ячеек таблицы

Урок 17. HTML объединение ячеек таблицы

Горизонтальное и вертикальное объединение ячеек

Это третий урок, посвященный HTML таблицам. Представление данных — основная функция таблиц в HTML, также некоторыми web-разработчиками они используются для верстки, что не является оптимальным вариантом построения каркаса сайта, но об этом позже, а сейчас познакомимся со свойствами ячеек таблицы.

  1. HTML объединение ячеек таблицы по горизонтали
  2. HTML объединение ячеек таблицы по вертикали

Объединение ячеек HTML таблицы по горизонтали

Пример:

<html>
<head>
<title>Объединение ячеек таблицы по горизонтали</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>Имя</th>
<th colspan="2">Телефон</th>
</tr>
<tr>
<td>Вася</td>
<td>777 88 999</td>
<td>777 77 999</td>
</tr>
</table>

В первом ряду, в отличае от второго, всего две ячейки, но тег <th> второй ячейки, первого ряда содержит атрибут colspan="", значение которого равно 2, что, в свою очередь, компенсирует отсутствие третьей ячейки. Цифра 2 означает, что одна ячейка по размеру равна двум.

Результат:

Имя Телефон
Вася 777 88 999 777 77 999

Объединение ячеек HTML таблицы по вертикали

Пример:

<html>
<head>
<title>Объединение ячеек таблицы по вертикали</title>
</head>
<body>
<table border="1" cellpadding="20" cellspacing="0">
<tr>
<td>Имя:</td>
<td>Ирина</td>
</tr>
<tr>
<td rowspan="2">Телефон:</td>
<td>333 22 555</td>
</tr>
<tr>
<td>444 11 777</td>
</tr>
</table>

Результат:

Имя: Ирина
Телефон: 333 22 555
444 11 777

Атрибуты и значения

Значения этих атрибутов определяют количество ячеек, которые будут объединены в одну.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 16. HTML таблица   Объединение ячеек таблицы   Урок 18. HTML список

    Сохранить в сервисы и закладки