Чтобы объединить ячейки в таблице CSS, вы можете использовать свойство border-collapse
с значением collapse
, чтобы сделать границы ячеек сплошными, и свойства border-spacing
или padding
, чтобы создать отступы между ячейками.
- Объединение ячеек по горизонтали:
<table>
<tr>
<td colspan="2">Объединенные ячейки</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</table>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 10px; /* or use border-spacing: 10px;*/
}
Здесь мы используем атрибут colspan="2"
в первой ячейке, чтобы объединить ее с ячейкой 2. Результат будет таким:
| Объединенные ячейки | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
- Объединение ячеек по вертикали:
<table>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
</tr>
<tr>
<td>Ячейка 6</td>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
</table>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 10px; /* or use border-spacing: 10px;*/
}
Здесь мы используем атрибут rowspan="2"
в первой ячейке, чтобы объединить ее с ячейками 4 и 5. Результат будет таким:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| | Ячейка 4 | Ячейка 5 |
| Ячейка 6 | Ячейка 7 | Ячейка 8 |
Надеюсь, это поможет вам объединить ячейки в таблице CSS.