表格的属性——宽、高
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>
实现的效果: