<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;