HTML之table表格学习

HTML table使用

thead、tbody、tfoot均可省略;

浏览器解析的时候会自动套上tbody

tr 行

td 列

th 标题列属性

colspan 列占用数

rowspan 行占用数

html 复制代码
<!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>
    <h3 style="text-align: center;">
        表格Demo
    </h3>
    <table border="1px" align="center" style="align-items: center;width: 300px;">
        <thead>
            <tr><!--行-->
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>
        </thead>
        <tbody>
            <tr><!--行-->
                <td>1</td><!--列-->
                <td>2</td>
                <td>3</td>
                <td rowspan="7">4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>zz</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>zz</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>zz</td>
                <td>100</td>
            </tr>
            <tr>
                <td>22</td>
                <td colspan="2">20</td>
            </tr>
            <tr>
                <td>33</td>
                <td colspan="2">40</td>
            </tr>
            <tr>
                <td>44</td>
                <td colspan="2">50</td>
            </tr>
        </tbody>
        <tfoot><!--有tfoot时 向下侵占不会占用tfoot中的单元格-->
            <tr>
                <td>4</td>
                <td>ww</td>
                <td>100</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>
相关推荐
武子康2 小时前
Java-82 深入浅出 MySQL 内部架构:服务层、存储引擎与文件系统全覆盖
java·开发语言·数据库·学习·mysql·spring·微服务
霜绛6 小时前
机器学习笔记(三)——决策树、随机森林
人工智能·笔记·学习·决策树·随机森林·机器学习
Amodoro6 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
站住前面的二哈7 小时前
Cartographer安装测试与模块开发(三)--Cartographer在Gazebo仿真环境下的建图以及建图与定位阶段问题(实车也可参考)
学习·ubuntu
伍哥的传说7 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4537 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
★YUI★7 小时前
学习游戏制作记录(克隆技能)7.25
学习·游戏·unity·c#
Trust yourself2437 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
屁股割了还要学8 小时前
【C语言进阶】柔性数组
c语言·开发语言·数据结构·c++·学习·算法·柔性数组
飛_9 小时前
【Word Press基础】创建一个动态的自定义区块
运维·nginx·html·word press