简单的HTML表格由table元素和一个或者多个<tr><td>元素组成
复杂的HTML表格可能包括caption、thead、tfoot、body 等元素
下面分享一个简单表格以及行列合并的应用实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" width="400" align="left"> <!--border 表格与单元格添加边框 cellspacing:设置单元格与表哥之间的间隔大小 cellpadding:设置单元格内容与单元格之间的内边距 --> <caption>购物车</caption> <thread> <tr bgcolor="green"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thread> <tbody> <tr> <td width="25">1</td> <td width="50">可乐</td> <td width="25">3</td> <td width="25">1</td> <td width="25" rowspan="3">3</td> <!--rowspan单元格在行的方向合并--> </tr> <tr> <td>2</td> <td>雪碧</td> <td>3</td> <td>1</td> </tr> <tr> <td>3</td> <td>美年达</td> <td>3</td> <td>1</td> </tr> <tr> <td colspan="3" align="center">总计</td> <!--单元格在列的方向上合并--> <td>3</td> <td>9</td> </tr> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码中涉及知识点注释总结:
1.border:表格与单元格之间添加边框
2.cellspacing:设置单元格与表格之间的间隔大小
cellpadding:设置单元格内容与单元格之间的内边距
3.rowspan单元格在行的方向上(水平)合并
colspan单元格在列的方向上(垂直)合并
4.表格头部<thead>只允许有一个
表格主题<tbody>可以有多个
表格底部, <tfoot>也只允许有一个