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>
相关推荐
bitbitDown41 分钟前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy42 分钟前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip2 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法3 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴3 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
Coovally AI模型快速验证3 小时前
从避障到实时建图:机器学习如何让无人机更智能、更安全、更实用(附微型机载演示示例)
人工智能·深度学习·神经网络·学习·安全·机器学习·无人机
lumi.3 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰3 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息4 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
北城以北88884 小时前
JavaScript--基础ES(一)
开发语言·javascript·intellij-idea