HTML（3）表格

表格的属性——宽、高

width和height来定义表格的宽和高，使表格更大方、美观。

<table border="2" width="200" height="100">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

需要注意的是：这里的width和hegiht单位是px，可加可不加。
这里width和height的值还可以是百分比（%），这样表格就可以随着文档宽高的变化而变化。

<table width="60%" height="200px">
   ...
</table

表格的属性——cellpadding

cellpadding，它规定了单元边沿与其内容之间的空白,如图

<table border="2" cellpadding="20">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

表格的属性——cellspacing

cellspacing，它规定了单元格之间的空间。

<table border="2" cellspacing="0" cellpadding="10">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

表格的标题

<caption>标签来创建表格标题，需要注意的是它的位置：紧随<table>标签之后。

<table border="2" cellspacing="0" cellpadding="10">
    <caption>班级成绩</caption>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

text-align

本来表格有自带的属性align也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性text-align来代替。\

<style>
table{
   text-align: center;
}
</style>
<table border="2" cellspacing="0" width="300">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

text-align属性有下面的几个值：

• left：左对齐； center：居中对齐； right：右对齐； justify：两端对齐。

<style>
    table{
        text-align:center;
    }
</style>
<table border="2px" width="20%" cellspacing="0" cellpadding="6">
<caption>本周财政计划</caption>
<tr>
    <td rowspan="2" colspan="2">项目</td>
    <td colspan="2">本周发生</td>
    <td rowspan="2">备注</td>
</tr>
<tr>
    <td>收入</td>
    <td>支出</td>
</tr>
<tr>
    <td rowspan="3">收入</td>
    <td>贷款收回</td>
    <td>8700</td>
    <td>0</td>
    <td></td>
</tr>
<tr>
    <td>内部转款</td>
    <td>6000</td>
    <td>0</td>
    <td></td>
</tr>
<tr>
    <td>收入合计</td>
    <td>14700</td>
    <td>0</td>
    <td></td>
</tr>
<tr>
    <td rowspan="3">支出</td>
    <td>采购支出</td>
    <td>0</td>
    <td>5000</td>
    <td></td>
</tr>
<tr>
    <td>工资支出</td>
    <td>0</td>
    <td>7000</td>
    <td></td>
</tr>
<tr>
    <td>支出合计</td>
    <td>0</td>
    <td>12000</td>
    <td></td>
</tr>
</table>

实现的效果：