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

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

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

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

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

Навигация по странице

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

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

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

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML таблица   Объединение HTML ячейки таблицы   HTML списки