效果:
代码:
<!DOCTYPE html> <html lang="zh-cn"> <head> <Meta charset="utf-8"> <title>表格元素</title> <head> <body> <table border="1"> <tr>///行 <td>张三</td>///单元格 <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> </table> <br> <table border="1" style="width:300px;"> <tr> <th>姓名</th> <th>性别</th> <th>婚否</th> </tr> <tr>///行 <td>张三</td>///单元格 <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> </table> <br> <table border="1" style="width:300px;"> <tr> <th rowspan="4">基本情况</th>///纵向合并单元格 <th>姓名</th> <th>性别</th> <th>婚否</th> </tr> <tr>///行 <td>张三</td>///单元格 <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> <tr> <td colspan="3">统计:共两人</td>///横向合并单元格 </tr> </table> <br> ///建议以下这么写 <table border="1" style="width:300px;"> <caption>这是一个表格</caption> <tfoot> <tr> <td colspan="3">统计:共两人</td>///横向合并单元格 </tr> </tfoot> <tbody> <tr>///行 <td>张三</td>///单元格 <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> </tbody> <thead> <tr> <th>姓名</th> <th>性别</th> <th>婚否</th> </tr> </thead> </table> <br>///颜色 <table border="1" style="width:300px;"> <colgroup style="background:white;" span="1"></colgroup> <colgroup style="background:red;" span="1"></colgroup> <tr> <th>姓名</th> <th>性别</th> <th>婚否</th> </tr> <tr>///行 <td>张三</td>///单元格 <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> </table> <br>///颜色 <table border="1" style="width:300px;"> <colgroup> <col>///占位符 <col style="background:red;" </colgroup> <tr> <th>姓名</th> <th>性别</th> <th>婚否</th> </tr> <tr>///行 <td>张三</td>///单元格 <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> </table> </body> <html><table>表格
<thead>表头
<tbody>表中数据
<tfoot>表尾
<tcaption>题目
<tr>行
<td>单元格
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。