<table class="demotable"> <caption>Заголовок к таблице</caption> <thead> <tr> <th>Заголовок столбца 1</th> <th>Заголовок столбца 2</th> <th>Заголовок столбца 3</th> </tr> </thead> <tfoot> <tr> <td>Нижняя колонка 1</td> <td></td> <td>Нижняя колонка 3</td> </tr> </tfoot> <colgroup> <col class="col1"/> <col span="2" class="col2"/> </colgroup> <tbody> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td></td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> </tbody> </table>
thead - верхняя строка таблицы,
tfoot - нижняя строка таблицы,
tbody - строки, хранящие основное содержание таблицы,
colgroup, col задают стиль для столбцов, атрибут span определяет количество колонок, к которым нужно применить соответствующие свойства. Не имеет приоритета, то есть если противоречащее свойство будет задано для td, то предпочтение будет отдано последнему.
tr - это контейнер строки, который содержит ячейки td или заголовочные ячейки th.
tfoot - нижняя строка таблицы,
tbody - строки, хранящие основное содержание таблицы,
colgroup, col задают стиль для столбцов, атрибут span определяет количество колонок, к которым нужно применить соответствующие свойства. Не имеет приоритета, то есть если противоречащее свойство будет задано для td, то предпочтение будет отдано последнему.
tr - это контейнер строки, который содержит ячейки td или заголовочные ячейки th.
CSS для таблицы
Поскольку сейчас в почёте CSS, то теперь с успехом можно заменить значения атрибутов на соответствующие свойства.
<style type="text/css">
.demotable {
border: 3px groove #eee6a3;
border-collapse: separate; /* По умолчанию, когда для каждой ячейки своя граница */
border-spacing: 7px 11px; /* Горизонтальное расстояние 7px и вертикальное 11px между ячейками */
text-align: center;
table-layout: auto; /* По умолчанию. Браузер отображает таблицу после того, как проанализирует размеры ячеек */
}
.demotable td, .demotable th {
border: 2px groove #e1d188;
}
.demotable tbody td {
empty-cells: hide; /* Фон и рамка в пустых ячейках отсутствуют */
}
.demotable tfoot td {
empty-cells: show; /* Фон и рамка в пустых ячейках присутствуют */
}
.demotable th {
background-color: #dbd1b2;
}
.col1 {
background-color: #f2e8c9;
}
.col2 {
background-color: #fff5d7;
}
</style>| Заголовок столбца 1 | Заголовок столбца 2 | Заголовок столбца 3 |
|---|---|---|
| Нижняя колонка 1 | Нижняя колонка 3 | |
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 5 | Ячейка 6 |
<style type="text/css">
.demotable {
border: 3px groove #eee6a3;
border-collapse: collapse; /* По периметру ячеек только одна линия */
text-align: center;
table-layout: fixed; /* Таблица загружается быстрее, поскольку уже заданы значения ширины ячеек в теге col */
}
.demotable td, .demotable th {
border: 2px groove #e1d188;
}
.demotable th {
background-color: #dbd1b2;
}
.col1 {
background-color: #f2e8c9;
width: 160px;
}
.col2 {
background-color: #fff5d7;
width: 200px;
}
.demotable caption {
caption-side: bottom; /* Заголовок под таблицей */
text-align: right;
}
</style>| Заголовок столбца 1 | Заголовок столбца 2 | Заголовок столбца 3 |
|---|---|---|
| Нижняя колонка 1 | Нижняя колонка 3 | |
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 5 | Ячейка 6 |
На http://css-tricks.com показано, как адаптировать длинные таблицы для экрана мобильного телефона.
html объединение ячеек таблицы
Весь код таблицы можно упростить до варианта:
<table>
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
<td>1_4</td>
</tr>
</table>
| 1_1 | 1_2 | 1_3 | 1_4 |
При необходимости увеличиваем количество строк до двух и более с помощью тега tr.
<table>
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
<td>1_4</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td>2_4</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
<td>3_4</td>
</tr>
</table>
| 1_1 | 1_2 | 1_3 | 1_4 |
| 2_1 | 2_2 | 2_3 | 2_4 |
| 3_1 | 3_2 | 3_3 | 3_4 |
Объединяются горизонтальные ячейки благодаря атрибуту colspan. При этом нужно удалить один тег td в том же блоке tr.
<table>
<tr>
<td>1_1</td>
<td colspan="2">1_2 + 1_3</td>
<td>1_4</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td>2_4</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
<td>3_4</td>
</tr>
</table>
| 1_1 | 1_2 + 1_3 | 1_4 | |
| 2_1 | 2_2 | 2_3 | 2_4 |
| 3_1 | 3_2 | 3_3 | 3_4 |
Для объединения вертикальных ячеек, применяем атрибут rowspan. При этом нужно удалить td в нижних блоках tr.
<table>
<tr>
<td>1_1</td>
<td colspan="2">1_2 + 1_3</td>
<td>1_4</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td rowspan="2">2_4 + 3_4</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
</tr>
</table>
| 1_1 | 1_2 + 1_3 | 1_4 | |
| 2_1 | 2_2 | 2_3 | 2_4 3_4 |
| 3_1 | 3_2 | 3_3 | |
Для объединения горизонтальных и вертикальных ячеек используются одновременно оба атрибута colspan и rowspan. А также удаляется соответствующее количество ячеек td, в моём случае от уже имеющегося варианта убираем две ячейки.
<table>
<tr>
<td>1_1</td>
<td colspan="2" rowspan="2">1_2 + 1_3 + 2_2 + 2_3</td>
<td>1_4</td>
</tr>
<tr>
<td>2_1</td>
<td rowspan="2">2_4 + 3_4</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
</tr>
</table>
| 1_1 | 1_2 + 1_3 2_2 + 2_3 | 1_4 | |
| 2_1 | 2_4 3_4 | ||
| 3_1 | 3_2 | 3_3 | |
4 комментария:
table-layout: fixed;