Пример кода:
- Код: выделить все
<html>
<head>
<meta charset="utf-8">
<title>Свойство border-collapse</title>
<style>
table {
width: 90%; /* Ширина таблицы */
border: 4px double red; /* Рамка вокруг таблицы */
border-collapse: collapse; /* Отображать только одинарные линии */
}
th {
text-align: left; /* Выравнивание по левому краю */
background: #eee; /* Цвет фона ячеек */
padding: 3px; /* Поля вокруг содержимого ячеек */
border: 1px solid red; /* Граница вокруг ячеек */
}
td {
padding: 4px; /* Поля вокруг содержимого ячеек */
border: 1px solid red; /* Граница вокруг ячеек */
}
</style>
</head>
<body>
<table>
<tr>
<th> </th>
<th>1111</th>
<th>2222</th>
<th>333</th>
</tr>
<tr>
<td>111</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>222</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>333</td>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
</html>
Визуальные результаты от применения данного свойства будут такими: