表格结构标签

1年前 (2021-07-24) 930次浏览 已收录 0个评论

表格结构标签

  • <thead>标签 表格的头部区域,<tbody>标签 表格的主体区域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
</head>
<body>
    <table align="center" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>降</td>
                <td>345</td>
                <td>123</td>
                <td>
                    <a href="https://www.baidu.com" target="_blank">百度</a>
                    <a href="https://www.sougou.com" target="_blank">搜狗</a>
                </td>
        </tr>
    </tbody>
    </table>
</body>
</html>
结果演示

合并单元格

  • 跨行合并:rowspan=”合并单元格的个数”,最上侧单元格为目标单元格。写合并代码。
  • 跨列合并:colspan=”合并单元格的个数”,最左侧单元格为目标单元格。写合并代码。

合并单元格分三步

  1. 先确定是跨行还是跨列。
  2. 找到目标单元格,写上合并方式=合并的单元格数量,比如:<td colspan=”2″></td>
  3. 删除多余的单元格代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <table align="center" border="2" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:表格结构标签
喜欢 (1)

您必须 登录 才能发表评论!