HTML学习分享

枯萎小熊

已于 2024-02-29 13:00:13 修改

阅读量499

点赞数 14

文章标签： html 学习前端

于 2024-02-28 22:11:25 首次发布

本文链接：https://blog.csdn.net/2301_79301066/article/details/136356397

版权

一、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

这是一个两行两列的表格

table标签包含：thead、tbody、tfoot、tr(行)、td（列）

二、常用属性

 <table border="1" width="300px" height="200px" bgcolor="pink" align="center" cellpadding="20" cellspacing="10">

border:设置表格的边框（默认值为0）

width和height：宽度和高度

bgcolor：背景颜色

background：背景图片

align:表格的位置

cellpadding:表格的边距（表格内元素与边框的距离）

cellspacing：表格的间距（单元格之间的距离）

三、表格的合并

rowspan:合并行

clospan:合并列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" height="600px" width="600px"  align="center" bgcolor="pink">
        <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>

这是一个三行三列的表格，现在将表格编号为1和4的两个表格合并:

因为是合并的是行，所以使用rospan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" height="600px" width="600px"  align="center" bgcolor="pink">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

结果如下：

需要注意的是，在合并的同时要将第二行第一列删除，可以理解

<td rowspan="2"></td>

表示原来编号为1和4的这两个表格，所以第二行的第一列就需要删除，否则就会重复，出现错误。

若未删除否则会出现如下错误：

若要合并编号为1和2和3的表格，得到如下表格：需要进行什么操作呢？

毋庸置疑，是合并列，所以使用clospan。并将其余两个<hd>删除，就可以满足要求。（这里不好理解，可以简单理解为：第一行从三个表格变为一个表格，所以在第一个<tr>中只需要一个<td>就行了。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" height="600px" width="600px"  align="center" bgcolor="pink">
        <tr>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>