表格结构
<table>标签用来创建表格,<tr>标签用来创建行,<td>标签用来创建列。这里先创建一个两行两列的表格。
代码如下:
<table border=“2”>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
</table>
效果如下:
上面border属性表示给表格添加边框,它的值2表示边框的宽度为2px。
表格的属性——宽、高
你可以使用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的值还可以是百分比(%),这样表格就可以随着文档宽高的变化而变化。
表格的属性——cellpadding
表格的另一个属性cellpadding,它规定了单元边沿与其内容之间的空白。这里用图来说明,如图所示:
灰色部分表示cellpadding,它的值表示灰色部分的宽度。
例子如下:
<table border=“2” cellpadding=“20”>
<tr>
<td>姓名</td>
\年龄</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</table>
效果如下:
表格的属性——cellspacing
表格的另一个属性cellspacing,它规定了单元格之间的空间。这里用图来说明,如图所示:
双箭头的大小表示cellspacing属性的值。只需把cellspacing的值设为0就可以实现上面的效果。代码如下:
<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>
</table>
效果如下:
表格—— 标签的 rowspan 属性
标签的rowspan属性规定了单元格可横跨的行数。代码如下: <\table border="2" cellspacing="0" width="200" ><tr>
<td rowspan=“3”>科目</td>
<td>语文 </td>
<td>80</td>
</tr>
<tr>
<td>数学</td>
<td>70</td>
</tr>
<tr>
<td>英语</td>
<td>75</td>
</tr>
</table>
效果如下:
这里分析一下代码,第一行第一列的科目表示科目横跨了3行,所以第二行和第三行的第一列就不写了,第二列和第三列不变。
表格——标签的colspan属性
<td>标签的colspan属性规定了单元格可横跨的列数。代码如下:
<table border=“2” cellspacing=“0” width=“200”>
<tr>
<td colspan=“3”>科目 </td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>75</td>
</tr>
</table>
效果如下:
这里分析一下代码,第一行第一列的科目表示科目横跨了3列,所以第二列和第三列就不写了,其他的不变。
属性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:两端对齐;