首页 / 更多教程 / 表格标签

表格标签

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了表格标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2346字，纯文字阅读大概需要4分钟。

内容图文

表格标签

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

<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属性将整个第四行合并。代码效果如下：
表格标签 - 文章图片

内容总结

以上是互联网集市为您收集整理的表格标签全部内容，希望文章能够帮你解决表格标签所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1001959.html

来源：【匿名】