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>
相关推荐
just小千12 分钟前
重学React(二):添加交互
javascript·react.js·交互
AA-代码批发V哥21 分钟前
HTML之表单结构全解析
前端·html
qq_5895681030 分钟前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
菜菜why31 分钟前
MSPM0G3507学习笔记(一) 重置版:适配逐飞库的ti板环境配置
笔记·学习·电赛·嵌入式软件·mspm0
夜阑卧听风吹雨,铁马冰河入梦来39 分钟前
Spring AI 阿里巴巴学习
人工智能·学习·spring
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~1 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_411671981 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
板栗焖小鸡2 小时前
STM32-PWM驱动无源蜂鸣器
stm32·学习