Html код таблицы

Опубликовано: 22.08.2018

видео html код таблицы

How To Edit HTML Table Selected Row Using Javascript [ with Source code ]
html код таблицы ( тег table ) рассмотрим на примере. <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 - верхняя строка таблицы,


Быстрый код! Создаем фильтр таблиц (HTML, CSS, JavaScript+jQuery)

tfoot - нижняя строка таблицы,

tbody - строки, хранящие основное содержание таблицы,

colgroup , col задают стиль для столбцов, атрибут span определяет количество колонок, к которым нужно применить соответствующие свойства. Не имеет приоритета, то есть если противоречащее свойство будет задано для td, то предпочтение будет отдано последнему.


How to Display Data from MySQL Database into HTML Table using PHP

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>

При необходимости увеличиваем количество строк до двух и более с помощью тега 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
IRC (Internet Relay Chat)
rss