其他分享
首页 > 其他分享> > 表格标签

表格标签

作者：互联网

表格标签

表格是由一个个小格组成的，多个小格组成行，多行组成表格。

<table>、<tr>和<td>标签

table是表格的意思，tr是英文table row（表格行）的缩写，td是英文table data（表格数据）的缩写，每个td就是一个小格，示例代码如下：

<body>
    <h2>认识表格</h2>
    <table border="1">
        <tr>
            <td>上午</td>
            <td>下午</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>英语</td>
            <td>历史</td>
        </tr>
    </table>
</body>

<table>的border属性

<table>标签通常有border属性，border是英文边界的意思，所以border属性是让表格能够显示边框，border属性值不需要加单位。比如上面代码中border=“1”，代表边框为一个像素宽。代码效果如下：
在这里插入图片描述

<table>的caption属性

<caption> 是表格的标题， 它常常作为<table>的第一个子元素出现。示例代码如下：

<body>
    <h2>表格标签的属性</h2>
    <table border="1">
        <caption>课程表</caption>
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>历史</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>历史</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
    </table>
</body>

其中<th>标签 是“标题小格”，可以替代<td>的作用，表示标题小格。代码效果如下：
在这里插入图片描述

单元格的合并

colspan属性和rowspan属性

colspan属性用来设置td或者th的列跨度，rowspan属性用来设置td或者th的行跨度。示例代码如下：

<body>
    <h2>单元格的合并</h2>
    <table border="1" width="500" cellspacing="0" cellpadding="5">
        <caption>课程表</caption>
        <tr bgcolor="red" align="center">
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr align="center">
            <td rowspan="2">语文</td>
            <td>数学</td>
            <td>历史</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td>数学</td>
            <td>历史</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td colspan="5" align="center">午休</td>
        </tr>
        <tr align="center">
            <td>语文</td>
            <td>数学</td>
            <td>历史</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td>语文</td>
            <td>数学</td>
            <td>历史</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
    </table>
</body>

在上面代码中，首先给表格设置了一个宽度，然后设置了cellspacing、cellpadding这两个属性。

cellpadding 属性定义了表格单元的内容和边框之间的空间，也就是单元格内的空白距离，cellspacing 属性（使用百分比或像素）定义了两个单元格之间空间的大小，也就是表格里单元格之间的距离，如今这两个属性都已经废弃，使用CSS替代。

然后设置了align 属性，align 属性三个值分别是left,center,right，对应左对齐、居中、右对齐。

设置rowspan属性将表格第一列的第二行和第三行合并，设置colspan属性将整个第四行合并。代码效果如下：
在这里插入图片描述

标签：表格,标签,代码,单元格,小格,border,属性
来源： https://blog.csdn.net/xjj19999272/article/details/116081644