html表格

html表格

初始

HTML表格由行和列组成，这里我们就用HTML标签写一个表格。

标签用来创建表格，<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的值还可以是百分比（%），这样表格就可以随着文档宽高的变化而变化。例子如下：

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

表格的属性——cellpadding

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

灰色部分表示cellpadding，它的值表示灰色部分的宽度。

<table border="2" cellpadding="20">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</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>
    </tr>
</table>

表格——<td> 标签的 rowspan 属性

<td>标签的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>

这里分析一下代码，第一行第一列的<td rowspan="3">科目</td>表示科目横跨了3行，所以第二行和第三行的第一列就不写了，第二列和第三列不变。

表格——<td>标签的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>

这里分析一下代码，第一行第一列的<td colspan="3">科目</td>表示科目横跨了3列，所以第二列和第三列就不写了，其他的不变。

文本对齐方式

<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：右对齐；
  td>
  18

```

[外链图片转存中…(img-QzsEnpA7-1636350332580)]

这样是不是效果要好一些。下面介绍一个这个属性。

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

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