Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены


Уроки HTML


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

Для горизонтального объединения применяется атрибут - colspan=" ", в которм указывается нужная длина (в ячейках) 

<html>
<head>
<title>Горизонтальное объединение ячеек</title>
</head>
<body>
<table border="1" cellpadding="12" >
<tr>
<td colspan="2" >Две в одной</td>
<th colspan="3" >Три в одной</th>
</tr>
<tr>
<td>Первая</td>
<td>Вторая</td>
<td>Третья</td>
<td>Четвёртая</td>
<td>Пятая</td>
</tr>
</table>
</body>
</html>
Две в одной Три в одной
Первая Вторая Третья Четвёртая Пятая


Вертикальное объединение ячеек html

Для вертикального объединения применяется атрибут - rowspan=" ", в которм указывается нужная высота (в ячейках) 

<html>
<head>
<title> Вертикальное объединение ячеек </title>
</head>
<body>
<table border="1" cellpadding="12">
<tr>
<td>Первая</td>
<td>Вторая</td>
</tr>
<tr>
<td rowspan="4" >4 в одной</td>
<td>раз</td>
</tr>
<tr>
<td>два</td>
</tr>
<tr>
<td>три</td>
</tr>
<tr>
<td>четыре</td>
</tr>
</table>
</body>
</html>
Первая Вторая
4 в одной раз
два
три
четыре


Вертикальное и горизонтальное объединение html

Опираясь на полученные знания из предыдущих уроков, сделаем таблицу в которой будет сразу же горизонтальное и вертикальное объединение (и по отдельности).

Сделаем таблицу размера 6 x 6 (из 36 ячеек) и по-разному объединим в ней ячейки, задав таблице и ячейкам некоторые стили. Но поскольку в таблице будут объединенные ячейки, то 6 X 6 – это лишь, условный размер. 

<html>
<head>
<title> мегатаблица </title>
</head>
<body>

<table style="margin: auto" border="1" cellpadding="10">
<tr>
<td bgcolor="#F8FFC6" colspan="3" > 1</td>
<td bgcolor="#F8FFC6" colspan="3" > 2</td>
</tr>

<tr>
<td bgcolor="#FFD5C6"  rowspan="4" > 3</td>
<td bgcolor="#C8FF95"> 4</td>
<td bgcolor="#C8FF95"> 5</td>
<td bgcolor="#C8FF95"> 6</td>
<td bgcolor="#C8FF95"> 7</td>
<td bgcolor="#FFD5C6" rowspan="4" > 8</td>
 </tr>

<tr>
<td bgcolor="#C8FF95"> 9</td>
<td bgcolor="#E5CCFF" rowspan="2" colspan="2" >10</td>
<td bgcolor="#C8FF95">11</td>

</tr>

<tr>
<td bgcolor="#C8FF95">12</td>
<td bgcolor="#C8FF95">13</td>
</tr>

<tr>
<td bgcolor="#C8FF95">14</td>
<td bgcolor="#C8FF95">15</td>
<td bgcolor="#C8FF95">16</td>
<td bgcolor="#C8FF95">17</td>
</tr>

<tr>
<td bgcolor="#F8FFC6" colspan="3" >18</td>
<td bgcolor="#F8FFC6" colspan="3" >19</td>
</tr>

</table>

</body>
</html>
1 2
3 4 5 6 7 8
9 10 11
12 13
14 15 16 17
18 19



◄ Предыдущий урок Содержание Следующий урок ►