实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自己来默写表格</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" width="400"> <!--表格名称--> <caption>购物车</caption> <!--表头部分--> <thead> <tr bgcolor="aqua"> <th>编号</th> <th>名称</th> <th>数量</th> <th>单价</th> <th>金额</th> <th>分类</th> </tr> </thead> <!--表格内容--> <tbody> <tr> <td>1</td> <td>钢笔</td> <td>2</td> <td>3</td> <td>6</td> <td rowspan="2">文具</td> </tr> <tr> <td>2</td> <td>笔记本</td> <td>3</td> <td>10</td> <td>30</td> </tr> <tr> <td>3</td> <td>水果刀</td> <td>5</td> <td>6</td> <td>30</td> <td>刀具</td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td colspan="2">合计</td> <td>10</td> <td></td> <td>66</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
本章写的过程中知识总结：
第一。表格可以用思路拆分。 拆分成主要两部分。 第一部分表头，第二部分表格内容
表头用 thead 开始，包住表头的内容。
表格内容按照表格有的内容直接层层按顺序写出即可
中间注意区别。 表头代码是 <thead><tr><th>根据内容次序写</th></tr></thead>
表格内容是 <tbord><tr><td> 层层对应表头写内容</td></tr></tbord>
中间两个常用点
1.列合并 表格内容里面重起一行 <tfoot><td colspan=""></td></tfoot> 合并几行
写几行，同时删除掉合并过的行。
2.行合并。 行合并需要加表头，<td rowspan=""></td> 同理列合并。
第三个知识点 表格的属性。
1.表格可以加背景，<bgcolor></bgcolor> 可以加边框 <table border="1" cellspacing=""></table> 等
总结：这种把表格分开处理的方式非常简单易懂，后期学习中，多多熟练运用。
