关于表格table的使用心得

Table表格

首先，了解表格的用法:
table:本身是双标签，不能单独使用，其次如果什么都不定义，跟普通的标签没什么区别,如果说，是什么让表格拥有了灵魂，跟tr,th,td标签分不开关系,每张表格都是table开始,可以用width和height来设置表格的长和宽,不写单位,单位默认还是px像素。
需要先给表格定义边框线，让表格显示出来,用border属性来设置它的边框线的粗细，默认边框线是为0的，从0开始数字越大边框线越粗。
tr:本身也是双标签,是每个表格的开始,tr是代表这表格中的行数,有多少tr就有多少行,需要配合和标签使用,直接使用没什么效果.
th和td:都是双标签,th是表格的表头,有加粗的功能,td是表格的单元格,有多少th和td是就代表着多少单元格.

<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

标题:用来设置标题内容

thead: 用来包裹表头的好定义样式和格式
tbody: 用来包裹内容的好定义内容的样式和格式
tfoot: 用来包裹页脚的,好定义页脚的内容和样式
设置样式的时候很方便就不用定义选择器就可以使用!

thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}

跨行合并与跨列合并
colspan属性:是行级合并的,后面的参数代表着跨几行
rowspan属性:是列级合并,后面的参数代表着跨几列

<h4>横跨两列的单元格：</h4>
<table border="2">
<tr>
  <th>地球</th>
  <th colspan="2">地球人数</th>
</tr>
<tr>
  <td>总人数</td>
  <td>70898898989</td>
  <td>70898898989</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>地球</th>
  <td>总人数</td>
</tr>
<tr>
  <th rowspan="2">总人数</th>
  <td>70898898989</td>
</tr>
<tr>
  <td>70898898989</td>
</tr>
</table>

单元格行距和单元格边距
Cellpadding属性:表示的单元格边距,是指单元格与表格之间的距离,后面的参数表示距离,从0开始.

</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>11111</td>
  <td>22222</td>
</tr>   
<tr>
  <td>44444</td>
  <td>33333</td>
</tr>
</table>

Cellspacing属性:表示的单元格行距,是指单元格与单元格之间的距离,后面的参数表示距离,从0开始.

</table>

<h4>带有 cellspacing：</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>12345</td>
  <td>67890</td>
</tr>   
<tr>
  <td>11111</td>
  <td>22222</td>
</tr>
</table>

表格的对齐方式

align属性:是关于表格的对齐方式,可以写在tr,th,td中
left是左对齐(默认的)
right:是右对齐
center:居中对齐

<table width="400" border="1">
 <tr>
  <th align="center">消费项目....</th>
  <th align="center">一月</th>
  <th align="center">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="left">$241.10</td>
  <td align="left">$50.20</td>
 </tr>
 <tr>
  <td align="right">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="center">食物</td>
  <td align="center">$730.40</td>
  <td align="center">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="center">$744.65</th>
 </tr>
</table>