• 《五》表格


    表格:是一些被称作单元格的矩形框按照从左到右,从上到下的顺序排列在一起而形成的,通常用来组织结构化的信息。

    <table></table> 表格标签:

    用于创建表格。

    属性有:

    1. width、height。
    2. border:表格边框的宽度。
    3. cellspacing:单元格之间的间距,默认是 2px。
    4. cellpadding:单元格边框与单元格内容之间的距离。
    5. frame:控制表格边框最外层的四条线框。
      属性值:void(默认值,无边框);above(仅顶部有边框);below(仅底部有边框);hsides(仅顶部和底部有边框);lns(仅左侧有边框);rhs(仅右侧有边框);vsides(仅左右侧有边框);box/border(全部四个边框)
    6. rules:控制是否显示以及如何显示单元格之间的分割线。
      属性值:none(默认值,无分割线);all;rows(仅有行分割线);clos(仅有列分割线);groups(仅在行组和列组之间有分割线)

    <tr></tr> 表格行标签:

    tr 是 table row 的缩写。用于创建表格行。

    属性有:

    1. align:表格行的单元格中内容的水平方向对齐方式。
      属性值:left、right、center。
    2. valign:表格行的单元格中内容的垂直方向对齐方式。
      属性值:top、bottom、middle。

    <td></td> 单元格标签。

    td 是 table data 的缩写,用于创建单元格,存储表格数据。

    属性有:

    1. width、height、align、valign。
    2. rowspan、colspan。

    <th></th> 表头单元格标签:

    用于创建表头单元格。

    <td></td><th></th> 都是单元格标签,嵌套在 <tr></tr> 标签内成对出现,两者的属性一样。但是 <th></th> 是表头标签,通常位于首行或首列,文字会被默认加粗居中,而 td></td> 不会。

    <caption></caption> 表格标题标签:

    用于为表格定义标题,必须紧随 <table></table> 标签之后,且每个表格只能定义一个标题。默认情况下,标题将在表格上方居中显示。

    <table border=”1”>
        <caption>我的表格</caption>//标题
        <tr>
            <td>第一行,第一列</td>
            <td>第一行,第二列</td>
        </tr>
    </table>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    <thead></thead> 表头行分组标签:

    用于对表格中的表头内容进行分组。

    <thead></thead><tbody></tbody><tfoot></tfoot> 必须结合使用,包含一个或者多个<tr></tr>,但是它们不会影响到表格的布局。

    <tbody></tbody> 表主体行分组标签:

    用于对表格中的主体内容进行分组。

    <thead></thead><tbody></tbody><tfoot></tfoot> 必须结合使用,包含一个或者多个<tr></tr>,但是它们不会影响到表格的布局。

    <table border=”1” width=”300”>
         <tbody align=”right”>
               <tr>
                     <td>mary</td>
                     <td>18</td>
                </tr>
                <tr>
                       <td>jerry</td>
                       <td>20</td>
                </tr>
         </tbody>
    </table>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    <tfoot></tfoot> 表尾行分组标签:

    用于对表格中的表注内容进行分组。

    <thead></thead><tbody></tbody><tfoot></tfoot> 必须结合使用,包含一个或者多个<tr></tr>,但是它们不会影响到表格的布局。

    不规则表格:

    设置单元格 <td></td> 的跨行或跨列属性可以创建出不规则表格。

    1. rowspan:设置单元格可横跨的行数。rowspan=”0” 表示单元格横跨到行组的最后一行。
    2. colspan:设置单元格可横跨的列数。colspan=”0” 表示单元格横跨到列组的最后一列。
    <table border=”1”>
          <tr>
              <td>1,1</td>
              <td>1,2</td>
              <td>1,3</td>
         </tr>
         <tr>
             <td colspan=”2”>2,1 2,2</td>
             <td>2,3</td>
        </tr>
    </table>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述

    嵌套表格:

    在单元格中放置另一个表格,即 <td></td> 元素中再包含 <table></table> 元素可以创建出嵌套表格。使用嵌套表格以设计复杂表格或者复杂布局。

  • 相关阅读:
    C语言加密字符(ZZULIOJ1064:加密字符)
    1. 获取数据-requests.get()
    Apollo 应用与源码分析:Monitor监控-软件监控-时间延迟监控
    Sui基金会宣布将从外部做市商处收回1.17亿枚SUI,以支持生态和社区发展
    云IDE产品的使用教程(java)
    中缀表达式转后缀表达式
    OpenCV项目实战-深度学习去阴影-图像去阴影
    C++ day4
    gitlab图形化界面使用
    C++中多态的原理【精华】
  • 原文地址:https://blog.csdn.net/wsln_123456/article/details/85061912