专栏首页一番码客前端基础-HTML基础(三)

前端基础-HTML基础(三)

本文目录

表格标签

table标签caption标签th/tr/td标签表格的删除与合并表格行列的删除表格行列的合并参考

表格标签

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>

    <body>
        <!--
            代表是一个表格
            tr : table row 行
            td : table data 数据格
            th : table header 表头
        -->
        <!--
            table的属性
                align : 对齐方式
                border : 边框的宽度
                width : 表格的宽度
                padding : 内边距
                cellpadding : 格子里的内容和格子的间距
                cellspacing : 格子和格子之间的间距
                frame : 外边框的显示
                rules : 内边框的显示
        -->
        <table rules="rows" frame="above" border="10px" align="center" width="90%" cellpadding="20px" cellspacing="0">
            <!--
                指定标题
                caption标签必须写在 table标签之后
            -->
            <caption>人员信息表</caption>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>11</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>22</td>
            </tr>
        </table>

        <table border="1px" align="center" width="90%" >
            <!--
                指定标题
                caption标签必须写在 table标签之后
            -->
            <caption>人员信息表</caption>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>11</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>22</td>
            </tr>
        </table>
    </body>

</html>

用于定一个表格,或用于页面布局。

table标签

  • 代表标签中的内容是表格。
  • 属性:
    • border:边框宽度。
  • width:宽度。
    • height:高度。
  • align:对齐方式。
    • cellpadding :格子里的内容和格子的间距。
  • cellspacing :格子和格子之间的间距。
    • frame :外边框的显示。
  • rules :内边框的显示。

caption标签

  • 指定表格的标题。
  • html是从上到下、从左往右的加载的,caption必须写在table标签之后。

th/tr/td标签

  • tr:table row 行。
  • td:table data 数据格。
  • th:table header 表头。
  • align属性,用于定义对齐方式。

表格的删除与合并

表格行列的删除

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>

    <body>
        <!--
            浏览器在解析表格的时候,会把table标签作为一个整体进行解析
            为了提高用户的使用体验,表格应该使用结构标签
        -->

        <table border="1px" align="center" width="90%">
            <!--
                指定标题
                caption标签必须写在 table标签之后
            -->
            <caption>人员信息表</caption>
            <!--
                表头
            -->
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <!--
                内容区
            -->
            <tbody>
                <tr>
                    <td>001</td>
                    <td>张三</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>李四</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>001</td>
                    <td>张三</td>
                    <td>11</td>
                </tr>
            </tbody>
            <!--
                页脚
            -->
            <tfoot>

            </tfoot>

        </table>
    </body>

</html>
  • theadtbodytfoot,跟顺序无关。
  • 行的删除 : 删除tr包括里面的td。
  • 列的删除 : 要删除所有行中对应的列,否则表格会发生错位。

表格行列的合并

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>行列的合并</title>
    </head>
    <!--
        rowspan : 指定行的合并,
                从上往下,找到第一个格子,设置rowspan属性
                属性值 :指定总共合并了多少个格子
                被合并的格子要删除
        colspan : 指定列的合并,
                从左往右,找到第一个格子,设置colspan属性
                属性值 :指定总共合并了多少个格子
                被合并的格子要删除
-->

    <body>
        <table border="1" cellspacing="0" width="90%">
            <tr>
                <th rowspan="3">指标</th>
                <th colspan="2">招生数</th>

                <th colspan="2">在校生数</th>
                <th colspan="2">毕业生数</th>
            </tr>
            <tr>

                <td>万人</td>
                <td>比上年增长(%)</td>
                <td>万人</td>
                <td>比上年增长(%)</td>
                <td>万人</td>
                <td>比上年增长(%)</td>
            </tr>
            <tr>
                <td>1.0</td>
                <td>3.5</td>
                <td>1.0</td>
                <td>3.5</td>
                <td>1.0</td>
                <td>3.5</td>
            </tr>
            <tr>
                <td>中等职业学校</td>
                <td>1.0</td>
                <td>3.5</td>
                <td>1.0</td>
                <td>3.5</td>
                <td>1.0</td>
                <td>3.5</td>
            </tr>
        </table>
    </body>

</html>
  • rowspan:指定行的合并。
    • 从上往下,找到第一个格子,设置rowspan属性。
    • 属性值:指定总共合并了多少个格子。
    • 被合并的格子要删除。
  • colspan : 指定列的合并。
    • 从左往右,找到第一个格子,设置colspan属性。
    • 属性值 :指定总共合并了多少个格子。
    • 被合并的格子要删除。

参考

  • 黑马程序员 120天全栈区块链开发 开源教程 https://github.com/itheima1/BlockChain

本文分享自微信公众号 - 一番码客(efonfighting),作者:Efonfighting

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JavaScript小项目】用户注册校验

    efonfighting
  • NodeJs-stream操作大文件

    假如我们要读取一个3G大小的电影文件,那么内存不就爆了么?node提供了流对象来读取大文件。

    efonfighting
  • 前端基础-CSS基础(六)

    efonfighting
  • 使用jquery的tmpl构建复杂表格

    Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的。 {{html}}:输出变量html,但是没有html编码,适合输出ht...

    一笠风雨任生平
  • flask第二十八篇——HTML【1】table标签

    用户2149234
  • JSP 中EL表达式用法详解

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便。接下来介绍EL主要的语法结构: ${sessionScope...

    庞小明
  • Dom 事件处理函数

    别人整理的,我顺手就给捏来了哈哈。很详细的一些事件,浏览器支持情况,以及详细的说明。在这里向整理者致敬。 <!DOCTYPE html PUBLIC "-//W...

    练小习
  • JS示例24-隔行换色(表格)

    专注APP开发
  • vim的寄存器动作真是太酷了

    zhaoolee
  • Geth GraphQL使用说明

    Geth V1.9.x增加了GraphQL的支持,开发者可以在经典的JSON RPC API和GraphQL API之间根据自己的去中心化应用具体需求进行选择。...

    用户1408045

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动