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>
相关推荐
维斯路1 小时前
ANSYS 热力耦合计算
学习
醉方休2 小时前
React Fiber 风格任务调度库
前端·javascript·react.js
华仔啊2 小时前
摸鱼神器!前端大佬私藏的 11 个 JS 神级 API,复制粘贴就能用,效率翻倍
前端·javascript
念念不忘 必有回响2 小时前
js设计模式-状态模式
javascript·设计模式·状态模式
小桥风满袖3 小时前
极简三分钟ES6 - 箭头函数
前端·javascript
bug_kada3 小时前
前端后端3步联调:Cookie认证实战,让登录功能完美上线!
前端·javascript
hj5914_前端新手3 小时前
深入分析 —— JavaScript 深拷贝
前端·javascript
jqq6663 小时前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js
织_网3 小时前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
悠哉悠哉愿意3 小时前
【数学建模学习笔记】机器学习分类:XGBoost分类
学习·机器学习·数学建模