zoukankan      html  css  js  c++  java
  • 表格进阶(TABLE ADVANCED)

    + 表格的色彩

    表元的背景色彩和背景图象
    <th bgcolor=#>
    <th background="URL">

    #=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称:
    Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
    Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
    <table border>
    <tr><th bgcolor=ffaa00>Food</th>
    <th bgcolor=Red>Drink</th>
    <th rowspan=2 background="image.gif">Sweet</th>
    <tr bgcolor=white><td>A</td><td>B</td>
    </table>
    
    Food Drink Sweet
    A B
    
    

    表格边框的色彩
    <table bordercolor=#>

    <table cellspacing=5 border=5 bodercolor=#ffaa00>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>
    
    Food Drink Sweet
    A B C

    表格边框色彩的亮度控制
    <table bordercolorlight=#>
    <table bordercolordark=#>

    <table cellspacing=5 border=5
    bordercolorlight=White bordercolordark=Maroon>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    <tr><td>A</td><td>B</td><td>C</td>
    </table>
    
    Food Drink Sweet
    A B C
    
    

    + 表格的分组显示(Structured Table)

    按行分组
    <thead> ... </thead> - 表的题头(Header)
    <tbody> ... </tbody> - 表的正文(Body)
    <tfoot> ... </tfoot> - 表的脚注(Footer)

    <table border>
    <thead>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    </thead>
    <tbody>
    <tr><td>A</td><td>B</td><td>C</td>
    <tr><td>D</td><td>E</td><td>F</td>
    </tbody>
    </table>
    
    Food Drink Sweet
    A B C
    D E F

    按列分组
    <colgroup align=#> #=left, right, center

    <table border width=160>
    <colgroup align=left>
    <colgroup align=center>
    <colgroup align=right>
    <thead>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    </thead>
    <tbody>
    <tr><td>A</td><td>B</td><td>C</td>
    <tr><td>D</td><td>E</td><td>F</td>
    </tbody>
    </table>
    
    Food Drink Sweet
    A B C
    D E F

    列的属性控制
    <col span=#> #=从左数起,具有指定属性的列的列数
    <col align=#> #=left, right, center

    <table border width=160>
    <colgroup>
    <col align=center span=2>
    <colgroup align=right>
    <thead>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    </thead>
    <tbody>
    <tr><td>A</td><td>B</td><td>C</td>
    <tr><td>D</td><td>E</td><td>F</td>
    </tbody>
    </table>
    
    Food Drink Sweet
    A B C
    D E F

    + 表格中边框的显示

    显示所有 4 个边框 <table frame=box>

    <table border frame=box>
    <thead>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    </thead>
    <tbody>
    <tr><td>A</td><td>B</td><td>C</td>
    <tr><td>D</td><td>E</td><td>F</td>
    </tbody>
    </table>
    
    Food Drink Sweet
    A B C
    D E F

    只显示上边框 <table frame=above>

    Food Drink Sweet
    A B C
    D E F

    只显示下边框 <table frame=below>

    Food Drink Sweet
    A B C
    D E F

    只显示上、下边框 <table frame=hsides>

    Food Drink Sweet
    A B C
    D E F

    只显示左、右边框 <table frame=vsides>

    Food Drink Sweet
    A B C
    D E F

    只显示左边框 <table frame=lhs>

    Food Drink Sweet
    A B C
    D E F

    只显示右边框 <table frame=rhs>

    Food Drink Sweet
    A B C
    D E F

    不显示任何边框 <table frame=void>

    Food Drink Sweet
    A B C
    D E F

    + 表格中分隔线(Rules)的显示

    显示所有分隔线 <table rules=all>

    <table border rules=all>
    <colgroup><col align=center span=2>
    <colgroup align=right>
    <thead>
    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
    </thead>
    <tbody>
    <tr><td>A</td><td>B</td><td>C</td>
    <tr><td>D</td><td>E</td><td>F</td>
    </tbody>
    <tbody>
    <tr><td rowspan=3 align=right>Total $-00.0</td>
    </tbody>
    </table>
    
    Food Drink Sweet
    A B C
    D E F
    Total $-00.0

    只显示组(Groups)与组之间的分隔线 <table rules=groups>

    Food Drink Sweet
    A B C
    D E F
    Total $-00.0

    只显示行与行之间的分隔线 <table rules=rows>

    Food Drink Sweet
    A B C
    D E F
    Total $-00.0

    只显示列与列之间的分隔线 <table rules=cols>

    Food Drink Sweet
    A B C
    D E F
    Total $-00.0

    不显示任何分隔线 <table rules=none>

    Food Drink Sweet
    A B C
    D E F
    Total $-00.0
  • 相关阅读:
    学习记录(1):intellij idea 导入gradle
    javac不是内部或外部命令
    robot framework测试https接口实例
    py文件变成可执行exe ,遇到的问题及解决方法
    python 实现爬虫下载网页的方法
    [Usaco2009 Open]干草堆
    【题解】[USACO17JAN]Balanced Photo G
    【题解】[BalticOI 2014]friends
    从恒定状态出发,求解未知状态
    Scoi 组队
  • 原文地址:https://www.cnblogs.com/ntearn/p/1355718.html
Copyright © 2011-2022 走看看