HTML DOM为表格指定规则
2025-04-24
17
参考资料
HTML DOM 表格规则
基本介绍
HTML DOM 表格规则用于定义表格的结构和样式,包括行、列、单元格的布局和表现。
主要标签
<table>
- 定义表格容器<caption>
- 定义表格标题<thead>
- 定义表头区域<tbody>
- 定义表格主体<tfoot>
- 定义表尾区域<tr>
- 定义表格行<th>
- 定义表头单元格<td>
- 定义标准单元格
基本用法
<table> <caption>表格标题</caption> <thead> <tr> <th>表头1</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> </tr> </tbody> <tfoot> <tr> <td>页脚1</td> <td>页脚2</td> </tr> </tfoot> </table>
功能特性
结构化数据展示
支持行/列合并
支持分组显示(thead/tbody/tfoot)
可访问性支持
CSS 扩展
/* 基础样式 */ table { border-collapse: collapse; /* 合并边框 */ width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } /* 斑马条纹效果 */ tbody tr:nth-child(even) { background-color: #f2f2f2; } /* 悬停效果 */ tbody tr:hover { background-color: #ddd; } /* 响应式表格 */ @media screen and (max-width: 600px) { table { border: 0; } table thead { display: none; } table tr { display: block; margin-bottom: 10px; } table td { display: block; text-align: right; } table td::before { content: attr(data-label); float: left; font-weight: bold; } }
高级功能实例
<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> </tr> <tr> <td rowspan="2">张三</td> <td>123456</td> <td>zhang@example.com</td> </tr> <tr> <td>789012</td> <td>zhang2@example.com</td> </tr> <tr> <td>李四</td> <td colspan="2">345678</td> </tr> </table>
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。