HTML表格标签及其属性

最新推荐文章于 2024-06-19 10:23:02 发布

在无尽的等待！

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量900

点赞数

分类专栏：基础知识文章标签： html

本文链接：https://blog.csdn.net/weixin_49542222/article/details/119379782

版权

基础知识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

表格标签

表格标签主要由下面三个标签组成

<table>
   <tr>
       <td>
       </td>
   </tr>
</table>

<table></table>代表着整个表格，而<tr></tr>表示一行，有多少个tr标签就代表有多少行。ty标签里的<td></td>表示行内的一个格子，一个ty标签里有多少个td标签就说明一行里有多少个格子。

也可以理解成一个表格由n行（n个<ty>标签）n列（一行内的n个<td>标签）组成。

例如

<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td>一行一列</td>
            <td>一行二列</td>
            <td>一行三列</td>
        </tr>
        <tr>
            <td>二行一列</td>
            <td>二行二列</td>
            <td>二行三列</td>
        </tr>
        <tr>
            <td>三行一列</td>
            <td>三行二列</td>
            <td>三行三列</td>
        </tr>
    </table>
</body>

表格属性

HTML表格也有一些属性来美化表格，不过美化的属性我们一般用CSS来实现，所以这个只要了解一部分就行。

属性
align： left center right 设定表格和字体靠左、居中或靠右排序
border：整数 px
cellpadding：内容与单元格之间的距离
cellspacing：单元格与单元格之间的距离
width：设定表格宽度
bgcolor：设定表格背景色

colspan 跨列合并
rowspan 跨行合并

这里主要重点是合并表格属性

不管是跨行还是跨列合并，都在要合并格子的第一个格子添加属性，并把其他的格子删掉。

跨列合并

<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2">一行一列</td>
            
            <td>一行三列</td>
        </tr>
        <tr>
            <td>二行一列</td>
            <td>二行二列</td>
            <td>二行三列</td>
        </tr>
        <tr>
            <td>三行一列</td>
            <td>三行二列</td>
            <td>三行三列</td>
        </tr>
    </table>
</body>

跨行合并

<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2">一行一列</td>
            <!-- <td>一行二列</td> -->
            <td>一行三列</td>
        </tr>
        <tr>
            <td rowspan="2">二行一列</td>
            <td>二行二列</td>
            <td>二行三列</td>
        </tr>
        <tr>
            <!-- <td>三行一列</td> -->
            <td>三行二列</td>
            <td>三行三列</td>
        </tr>
    </table>
</body>

在无尽的等待！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML表格标签及其属性

表格标签主要由下面三个标签组成<table> <tr> <td> </td> </tr></table><table></table>代表着整个表格，而<tr></tr>表示一行，有多少个tr标签就代表有多少行。ty标签里的<td></td>表示行内的一个格子，一个ty标签里有多少个td标签就说明一行里有多少个格子
复制链接

扫一扫

专栏目录