Объединение ячеек HTML-таблицы буквой «Г»
Объединение ячеек таблицы в форме буквы «Г» применяется для отображения логических связей между содержимым этих ячеек, в то же время физическая разметка, которая определяет ячейки как элементы таблицы, может остаться прежней (пример №1 ) или быть изменена (пример №2 ).
Пример №1
Пример №2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Объединение ячеек HTML-таблицы буквой «Г» — Пример №2</title>
<style>
table {border-collapse: collapse;}
table, td {border: 1px solid #000;}
td {padding: 10px;}
td[rowspan], td[colspan] {background: #ccc;}
td[rowspan] {vertical-align: top;}
td[colspan] {text-align: left;}
.merging {border: 0;}
</style>
</head>
<body>
<h1>Объединение ячеек HTML-таблицы буквой «Г» — Пример №2</h1>
<table>
<tr>
<td>A1</td><td>B1</td><td>C1</td><td>D1</td><td>E1</td>
</tr>
<tr>
<td>A2</td>
<td rowspan="2" class="merging">B2<br>B3</td>
<td colspan="2" class="merging">C2 D2</td>
<td>E2</td>
</tr>
<tr>
<td>A3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
</tr>
<tr>
<td>A4</td><td>B4</td><td>C4</td><td>D4</td><td>E4</td>
</tr>
</table>
</body>
</html>
Смотреть в этой вкладке Смотреть в новой вкладке
31.07.2014