- Теория
- Теория
Комбо: colspan + rowspan
Можно растягивать ячейку одновременно и по вертикали, и по горизонтали. Для этого нужно задать ячейке два атрибута: rowspan и colspan.
Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек. Правда, вытесненных ячеек окажется больше. Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.
Этот случай из тех, которые легче объяснить на примере, чем на словах. В этом задании вы растянете ячейку на два столбца и две строки и сами увидите, как поведёт себя таблица. В результате получится:
- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Комбо: colspan + rowspan</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td class="pink">1.2</td>
<td>1.3</td>
</tr>
<tr>
<td class="pink">2.1</td>
<td class="pink">2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>
CSS
table {
border-collapse: separate;
border-spacing: 4px;
border: 2px solid black;
}
td {
padding: 5px;
padding-right: 30px;
border: 1px solid lightgray;
}
.pink {
background-color: pink;
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- Добавьте ячейке
1.1атрибутыcolspan="2"иrowspan="2". - Удалите ячейки с классом
pink(розовые).