- Теория
- Теория
Закрепление colspan
Можно ли объединять более двух ячеек по горизонтали? Можно! При этом точно так же используется атрибут colspan. Однако, так как ячейка «растягивается» вправо больше, чем на одну соседнюю ячейку, то и лишних столбцов появляется больше.
Например, если установить colspan равным 4, то ячейка растянется на три соседние ячейки справа, а они в свою очередь сместятся, добавив в таблицу три столбца.
В этом задании вы потренируетесь объединять различное число ячеек. Ячейки, помеченные розовым фоном, будут смещаться, и их надо будет удалять. Вот, что должно получиться:
- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Закрепление colspan</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td class="pink">1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td class="pink">2.3</td>
<td class="pink">2.4</td>
</tr>
<tr>
<td>3.1</td>
<td class="pink">3.2</td>
<td class="pink">3.3</td>
<td class="pink">3.4</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td>4.4</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;
}
ЗадачиВыполнено
- Добавьте ячейке
1.2атрибутcolspan="2". Удалите ячейку с классомpinkв первой строке. - Добавьте ячейке
2.2атрибутcolspan="3", удалите ячейки с классомpinkво второй строке. - Добавьте ячейке
3.1атрибутcolspan="4", удалите ячейки с классомpinkв третьей строке.