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 小时前
用CSS画一条0.5px的线
前端·javascript·css
雪碧聊技术2 小时前
element-plus中Autocomplete自动补全输入框组件的使用
前端·javascript·vue.js·自动补全输入框·autocomplete
架构文摘JGWZ5 小时前
SQLite?低调不是小众...
数据库·后端·学习·sqlite
dorabighead5 小时前
重构版:JavaScript 的 new 操作符——从“黑箱仪式”到“亲手造物”的认知跃迁
开发语言·javascript·重构
薛定谔的码*5 小时前
英语学习(GitHub学到的分享)
学习
Perfect—完美5 小时前
Vue 3 事件总线详解:构建组件间高效通信的桥梁
前端·javascript·vue.js
wtrees_松阳5 小时前
【编程向导】-JavaScript-基础语法-类型检测
开发语言·javascript·原型模式
虾球xz6 小时前
游戏引擎学习第157天
学习·游戏引擎
祈澈菇凉6 小时前
Vue 中如何实现自定义指令?
前端·javascript·vue.js
岱宗夫up6 小时前
C语言零基础入门:嵌入式系统开发之旅
c语言·开发语言·学习