zoukankan      html  css  js  c++  java
  • table常用的属性以及用法

    <table><table/>先定义一个表格这个就没得讲了,<caption>表示这个表格的标题

    <table border="6">
    <caption>我的标题</caption>
    <tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
    </tr>
    <tr>
      <td>400</td>
      <td>500</td>
      <td>600</td>
    </tr>
    </table>

    例如:.<th></th>和<tr></tr>分别表示表头和行,其实这两个都差不多,只是th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本,让我来看两个案例就知道了:

     1 <html>
     2 <body>
     4 <table border="1">
     5   <tr>
     6     <th>Company</th>
     7     <th>Address</th>
     8   </tr>
    10   <tr>
    11     <td>Apple, Inc.</td>
    12     <td>1 Infinite Loop Cupertino, CA 95014</td>
    13   </tr>
    14 </table>
    17 </body>
    18 </html>

    在网页显示:,可以看出字体的粗细不一样,还有粗体比较居中一点。其中还有个<tr>属性,这个是用来定义每一行的,我们可以看到图片中总共两行,代码里就用了两个<tr>属性。

    接下来讲<thead>属性,这个属性可以让你的表格变化多端,但是<thead>的一些子属性几乎没有浏览器支持,不过还是要讲一下,(1):<thead>可以与<tbody>,<tfoot>一起用,tbody 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组,乍一看估计很多人不理解这句话的含义,其含义就是<thead>放在每个表格的第一行的表头例如可以放在第一个<tr>属性之后,<tbody>和<tfoot>则放在之后,让我们来看个例子:

    <html>
    <head>
    <style type="text/css">
    thead {color:green}
    tbody {color:blue;height:50px}
    tfoot {color:red}
    </style>
    </head>
    <body>
    
    <table border="1">
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
    </table>
    
    </body>
    </html>

    在网页显示:,可以看到<thead>定义的表头“Month Savings”在css代码的影响下显示成绿色,同理可得<tbody><tfoot>的用法一样,只是顺序不同,这里有个规则:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签,在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。此外,<thead>还有一些别的属性:例如algin:定义 thead 元素中内容的对齐方式,valign:规定 thead 元素中内容的垂直对齐方式,这些你有兴趣的话可以去w3school看看。<col>和<colgroup>可以对全部列进行应用样式,这样就不需要对各个单元和各行重复应用样式。<col>对列进行应用样式,它的子属性<span>规定 <col> 元素应该横跨的列数,来看个例子:

    <!DOCTYPE html>
    <html>
    <body>
    
    <table border="1">
    <colgroup>
        <col span="2" style="background-color:red"/>
        <col style="background-color:yellow"/>
      </colgroup>
      <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
      <tr>
        <td>5869207</td>
        <td>My first CSS</td>
        <td>$49</td>
      </tr>
    </table>
    
    </body>
    </html

    网页显示:,我们可以看到<span>的值是2,所以连续两列背景是红色的,当我把它改成“1”时,网页就会显示:,就变成一列红色,而下面没有定义的默认值是1,所以第二列是黄色的,这边说明一下<col>和<colgroup>两者的区别,<col>格式比如<col span="value" style="css代码">在一些软件是可以运行的,但严格意义上需要包含在<colgroup></colgroup>内部,且<col>不能写成<col></col>。还有align属性,不过貌似浏览器不支持。

  • 相关阅读:
    C# 图形普通处理,resize ,水印..
    图像处理 形态学 (腐蚀 膨胀 开闭运算 连通分量....)
    获取usb设备父系或子代
    aforge通过角点匹配图片相似度
    CentOS 手动增加、删除swap区
    Zabbix 中文使用手册
    CentOS7下Firewall防火墙配置用法详解
    CentOS7安装Zabbix
    宅男也可变形男-我是如何在11个月零27天减掉80斤的
    CentOS环境下使用GIT基于Nginx的私服搭建全过程
  • 原文地址:https://www.cnblogs.com/doudoublog/p/4989663.html
Copyright © 2011-2022 走看看