HTML表格

表格结构

<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：两端对齐；