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

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

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

HTML объединение ячеек таблицы по горизонтали
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

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

colspan="" – определяет объединение ячеек по горизонтали.
rowspan="" – определяет объединение ячеек по вертикали.

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

Дата публикации: Октябрь 2009 | Обновление: Май 2012

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

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