table标签相关属性

1. 宽度（width）和高度（height）属性

可以给table标签和td标签使用

• table中设置

<table border="1px" width="200px" height="50px">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

• td中设置

<table>
    <tr>
        <td width="50px" height="20px"></td>
        <td></td>
    </tr>
    <tr>

注意：
给td设置高度和宽度，只会改变当前单元格的宽度和高度，并不改变整个表格的宽度和高度。

2. 水平对齐（align）和垂直对齐（valign）属性

2.1 水平对齐（align）可以给table、tr、td标签使用

• table中设置
  控制表格在水平方向上的UI器方式

<table border="1px" width="200px" height="100px" align="left/right/center">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr> 

• tr中设置
  设置当前行中单元格内容的水平对齐方式

<table>
    <tr>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr align="left/right/center">
        <td>21</td>
        <td>22</td>
    </tr>

• td中设置
  控制单元格内容在水平方向上的对齐方式
  如果tr和td都设置了align属性，td中的align属性会覆盖tr中的

<table>
    <tr>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr align="left/right/center">
        <td align="left/right/center">21</td>
        <td>22</td>
    </tr>

2.2 垂直（valign）对齐只能给tr、td标签使用

• tr中设置
  控制当前行的单元格内容在垂直方向上的对齐方式

<table border="1px" height="100px" width="200px">
    <tr valign="top/center/bottom">
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td >21</td>
        <td>22</td>
    </tr>

• td中设置
  控制当前单元格的内容在垂直方向上的对齐方式

<table border="1px" height="100px" width="200px">
    <tr>
        <td valign="top">11</td>
        <td>12</td>
    </tr>
    <tr>
        <td >21</td>
        <td>22</td>
    </tr>
</table>

如果tr和td都设置了valign属性，td中的valign属性会覆盖tr中的

3. 外边距（cellspacing）和内边距（cellpadding）属性

只能给table标签使用

• 外边距（cellspacing）：单元格与单元格之间的距离，未设置时默认为2px

<table border="1px" height="100px" width="200px" cellspacing="0px">
    <tr>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td >21</td>
        <td>22</td>
    </tr>

• 内边距（cellpadding）：单元格的边框与单元格内容之间的距离，未设置时默认为1px

<table border="1px" height="100px" width="200px" cellpadding="10px" >
    <tr>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td >21</td>
        <td>22</td>
    </tr>

3.单元格合并

1. 合并水平单元格：给td标签设置colspan=“数字”；向后合并
   合并垂直单元格：给td标签设置rolspan=“数字”；向下合并
2. 如果我们没有编写tbody, 系统会系统给我们添加tbody；
   如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化。

4.表格的标题

<table border="1px" width="400px">
    <caption>title</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>