老是忘记table表格的用法，今天已经是第4次+重新学习table，决定把table的用法总结一下。
HTML代码：
<div id="main">
<table>
<caption>Table 1 Customers</caption>
<thead>
<tr>
<th>物品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>苹果</td>
<td>8 rmb/kg</td>
</tr>
<tr>
<td>鸭梨</td>
<td>5 rmb/kg</td>
</tr>
</tbody>
</table>
</div>
CSS代码：
#main{
width: 500px;
}
caption{
caption-side: bottom;
}
table,th,td{
border:solid 1px #666;
}
table{
width:100%;
border-collapse: collapse;//折叠边框
}
th{
height:50px;
background: yellow;
}
td{
text-align: center;
height:30px;
vertical-align: bottom;
}
浏览器的测试结果：
Paste_Image.png
1.首先table标签里可以有thead和tbody及tfoot标签。
不加上这些标签表面上看不出对最后的渲染有什么影响，但我想既然有这些标签的存在，肯定会有它们存在的原因：
按W3C的规范设计目的，把表格分为thead、tbody、tfoot主要是为了在浏览很长的表格时，其表头及表尾可以不动，只有内容在动。
顾名思义：
thead用来放标题之类的；tbody用来放数据主体；tfoot则是用来放表格的脚注之类的。
附加说明：
没有必要全部用到，但要记住如果有thead 或 tfoot就必须有tbody。
2.表格标题写在 caption标签里(表的名字)
caption-side:top(默认在table正上方) / bottom（在table正下方）
3.tr标签
表示table里的一行 里面可以是多组由th或者td标签所定义的单元格；
关于th标签
用来定义表头的单元格，表格中的文字将以粗体显示，并居中。（必须放在tr标签内）
关于td标签
用来定义单元格标签，一组td将建立一个单元格，（必须放在tr标签内）
增加css样式的说明
1.border-collapse ：collapse 折叠边框
2.text-align :center 标签内的文本水平居中
3.vertical-align :center 标签内的文本垂直居中
4.border-spacing :4px 控制单元格之间的距离
