HTML ячейки, таблицы
HTML объединение ячеек таблицы
HTML ячейки и объединение ячеек таблицы
Горизонтальное и вертикальное объединение ячеек таблицы
Это третий урок, посвященный HTML таблицам. Представление данных — основная функция таблиц в HTML, также некоторыми веб-разработчиками они используются для верстки, что не является оптимальным вариантом построения каркаса сайта, но об этом позже, а сейчас познакомимся со свойствами ячеек таблицы.
Навигация по странице
-
HTML ячейки • Объединение HTML ячеек таблицы по горизонтали
-
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 | Обновление: Ноябрь 2018
HTML таблица Объединение HTML ячейки таблицы HTML списки