HTML——表格

目录

一、表格的基本构成

二、表格的属性——宽、高

三、表格的属性——cellpadding和cellspacing

四、表格的标题

五、<td>标签的rowspan属性和colspan属性

一、表格的基本构成

<table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列

border属性表示给表格添加边框，它的值2表示边框的宽度为2px

代码如下：

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

效果如下：

 二、表格的属性——宽、高

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

这里的width和hegiht单位是px，可加可不加。

width和height的值还可以是百分比（%），这样表格就可以随着文档宽高的变化而变化。

代码如下：

<table border="1" width="100%" height="200">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
        </tr>
</table>   

效果如下：

 三、表格的属性——cellpadding和cellspacing

属性cellpadding，它规定了单元格边沿与其内容之间的空白。

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

代码如下：

<table border="1" cellpadding="20" cellspacing="0" >
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
        </tr>
</table> 

代码如下：

<table border="1" cellpadding="20" cellspacing="20" >
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
        </tr>
</table> 

 四、表格的标题

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

<table border="1" cellpadding="10" cellspacing="0">
    <caption>科目成绩</caption>
    <tr>    
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>合计</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>265</td>
   </tr>
</table>

 五、<td>标签的rowspan属性和colspan属性

<td>标签的rowspan属性来实现，它规定了单元格可横跨的行数。(行的合并）

<td>标签的colspan属性来实现，它规定了单元格可横跨的列数。(列的合并）

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>

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>

 添加内容：

表格有自带的属性align，也是控制文本方向的。

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

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

<style>
table{
   text-align: center;
}
</style>