• html:表格标签(基本格式、单元格的合并、表格结构标签)


    1、基本格式

    <table>//定义一个完整的表格
        <tr>//一行
            <td></td>//一个单元格
            <td></td>
            <td></td>
        </tr>
    </table>

    用表格实现成绩登记表:

    <html>
    
        <head>
            <meta charset="utf-8">
            <title>成绩登记表格</title>
        </head>
    
        <body>
            <table width="600" border="1"  align="center" cellpadding="5" cellspacing="3">
                  <!--
                            可以 定义表格的大小,背景,边框,单元格间距等
                  -->
                <caption>成绩登记表</caption>
                <tr>
    <th bgcolor="blanchedalmond "align="middle" >序号</th>      <!-- <th></th>标记设置-->              
    <th bgcolor="blanchedalmond "align="middle ">学号</th>
    <th bgcolor="blanchedalmond "align="middle ">姓名</th>
    <th bgcolor="blanchedalmond "align="middle ">平时成绩</th>
    <th bgcolor="blanchedalmond "align="middle ">期末成绩</td>
    <th bgcolor="blanchedalmond "align="middle ">学期总成绩</th>
    
    </tr>
    <tr>
    <td align="middle ">1</td>
    <td align="middle ">20100300201</td>
    <td align="middle ">张小丽</td>
    <td align="middle ">95</td>
    <td align="middle ">95</td>
    <td align="middle ">95</td>
    </tr>
    <tr>
    <td bgcolor="grey "align="middle ">2</td>
    <td bgcolor="grey "align="middle ">20100300202</td>
    <td bgcolor="grey "align="middle ">李宁</td>
    <td bgcolor="grey "align="middle ">90</td>
    <td bgcolor="grey "align="middle ">88</td>
    <td bgcolor="grey "align="middle ">89</td>
    </tr>
    <tr>
    <td align="middle ">3</td>
    <td align="middle ">20100300203</td>
    <td align="middle ">刘梅</td>
    <td align="middle ">98</td>
    <td align="middle ">92</td>
    <td align="middle ">95</td>
    </tr>
    <tr>
    <td bgcolor="grey "align="middle ">4</td>
    <td bgcolor="grey "align="middle ">20100300204</td>
    <td bgcolor="grey "align="middle ">王刚</td>
    <td bgcolor="grey "align="middle ">98</td>
    <td bgcolor="grey "align="middle ">90</td>
    <td bgcolor="grey "align="middle ">94</td>
    </tr>
    <tr>
    <td align="middle ">5</td>
    <td align="middle ">20100300205</td>
    <td align="middle ">郑军</td>
    <td align="middle ">90</td>
    <td align="middle ">85</td>
    <td align="middle ">87</td>
    </tr>
    <tr>
    <td bgcolor="grey "align="middle ">6</td>
    <td bgcolor="grey "align="middle ">20100300206</td>
    <td bgcolor="grey "align="middle ">杨波</td>
    <td bgcolor="grey "align="middle ">80</td>
    <td bgcolor="grey "align="middle ">80</td>
    <td bgcolor="grey "align="middle ">80</td>
    </tr>
    </table>
    </body>
    </html>

    2、单元格的合并

    <html>
    
        <head>
            <meta charset="utf-8">
            <title>成绩登记表格</title>
        </head>
    
        <body>
            <table width="600" border="1" align="center" cellpadding="5" cellspacing="3">
                <!--
                        可以 定义表格的大小,背景,边框,单元格间距等
                -->
                <caption>课程表</caption>
                <tr>
                    <th bgcolor="blanchedalmond " align="middle">星期一</th>
                    <th bgcolor="blanchedalmond " align="middle ">星期二</th>
                    <th bgcolor="blanchedalmond " align="middle ">星期三</th>
                    <th bgcolor="blanchedalmond " align="middle ">星期四</th>
                    <th bgcolor="blanchedalmond " align="middle ">星期五</td>
                </tr>
                <tr>
                    <td>数据结构</td>
                    <td>数据库</td>
                    <td rowspan="2">计算机组成原理</td>
                    <td>大学体育</td>
                    <td>大学英语</td>
                </tr>
                <tr>
                    <td colspan="2">数据库</td>
                    <td>数据结构</td>
                    <td>大学英语</td>
    
                </tr>
            </table>
        </body>
    
    </html>

    利用rowspace属性和colspace属性的修改,分别实现跨行和跨列。跨行合并的话,要把最上侧的单元格作为目标单元格写合并代码,跨列合并的话,最左侧单元格为目标单元格写合并代码。例如,在合并计算机组成原理这一列的时候,将合并的代码写在第1行。

    th:table head:文字会居中加粗显示,突出重要性,常用于表格第一行

    border=1:表示使用边框

    cellpadding:单元便于其内容之间的距离

    cellspacing:单元格之间的距离

    3、表格结构标签(thead与tbody)

    分别定义,表格的头部和主体,头部通常位于表格第一行,主体用于存放数据,他们两个标签都放在table标签中,添加之后,显示效果无明显变化,但是结构会更加清晰。

    <html>
    
        <head>
            <meta charset="utf-8">
            <title>成绩登记表格</title>
        </head>
    
        <body>
            <table width="600" border="1" align="center" cellpadding="5" cellspacing="3">
                <caption>课程表</caption>
                <thead>
                <tr>
                    <th bgcolor="blanchedalmond " align="middle">星期一</th>
                    <th bgcolor="blanchedalmond " align="middle ">星期二</th>
                    <th bgcolor="blanchedalmond " align="middle ">星期三</th>
                    <th bgcolor="blanchedalmond " align="middle ">星期四</th>
                    <th bgcolor="blanchedalmond " align="middle ">星期五</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>数据结构</td>
                    <td>数据库</td>
                    <td rowspan="2">计算机组成原理</td>
                    <td>大学体育</td>
                    <td>大学英语</td>
                </tr>
                <tr>
                    <td colspan="2">数据库</td>
                    <td>数据结构</td>
                    <td>大学英语</td>
    
                </tr>
                </tbody>
            </table>
        </body>
    
    </html>

     

    分别订一标狗的头部好主体,

  • 相关阅读:
    Serverless 架构下的服务优雅下线实践
    容器技术之发展简史
    Fluid 0.3 新版本正式发布:实现云原生场景通用化数据加速
    阿里云研究员叔同:Serverless 正当时!
    精准容量、秒级弹性,压测工具 + SAE 方案如何成功突破传统大促难关?
    如何提升微服务的幸福感?
    Dubbo 3.0 前瞻之:常用协议对比及 RPC 协议新形态探索
    服务发现技术选型那点事儿
    [漫谈] 状态
    [漫谈] 软件设计的目标和途径
  • 原文地址:https://www.cnblogs.com/zhai1997/p/11410351.html
Copyright © 2020-2023  润新知