• html table


    <html>

    <body>

    <p><b>注释:</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

    <p>Table with frame="box":</p>
    <table frame="box">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>

    <p>Table with frame="above":</p>
    <table frame="above">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>

    <p>Table with frame="below":</p>
    <table frame="below">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>

    <p>Table with frame="hsides":</p>
    <table frame="hsides">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>

    <p>Table with frame="vsides":</p>
    <table frame="vsides">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>


    <table width="400" border="1">
     <tr>
      <th align="left">消费项目....</th>
      <th align="right">一月</th>
      <th align="right">二月</th>
     </tr>
     <tr>
      <td align="left">衣服</td>
      <td align="right">$241.10</td>
      <td align="right">$50.20</td>
     </tr>
     <tr>
      <td align="left">化妆品</td>
      <td align="right">$30.00</td>
      <td align="right">$44.45</td>
     </tr>
     <tr>
      <td align="left">食物</td>
      <td align="right">$730.40</td>
      <td align="right">$650.00</td>
     </tr>
     <tr>
      <th align="left">总计</th>
      <th align="right">$1001.50</th>
      <th align="right">$744.65</th>
     </tr>
    </table>


    <h4>单元背景:</h4>  
    <table border="1">
    <tr>
      <td bgcolor="red">First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td
      background="1.jpg">
      Second</td>
      <td>Row</td>
    </tr>
    </table>


    <h4>背景颜色:</h4>
    <table border="1"
    bgcolor="red">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>

    <h4>背景图像:</h4>
    <table border="1"
    background="1.jpg">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>



    <h4>没有 cellspacing:</h4>
    <table border="1">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>

    <h4>带有 cellspacing:</h4>
    <table border="1"
    cellspacing="10">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>


    <h4>没有 cellpadding:</h4>
    <table border="1">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>

    <h4>带有 cellpadding:</h4>
    <table border="1"
    cellpadding="10">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>


    <h4>这个表格没有边框:</h4>
    <table>
    <tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
    </tr>
    <tr>
      <td>400</td>
      <td>500</td>
      <td>600</td>
    </tr>
    </table>

    <h4>表头:</h4>
    <table border="1">
    <tr>
      <th>姓名</th>
      <th>电话</th>
      <th>电话</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
    </tr>
    </table>

    <h4>垂直的表头:</h4>
    <table border="1">
    <tr>
      <th>姓名</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th>电话</th>
      <td>555 77 854</td>
    </tr>
    <tr>
      <th>电话</th>
      <td>555 77 855</td>
    </tr>
    </table>

    <table border="1">
    <tr>
      <td>
       <p>这是一个段落。</p>
       <p>这是另一个段落。</p>
      </td>
      <td>这个单元包含一个表格:
       <table border="1">
       <tr>
         <td>A</td>
         <td>B</td>
       </tr>
       <tr>
         <td>C</td>
         <td>D</td>
       </tr>
       </table>
      </td>
    </tr>
    <tr>
      <td>这个单元包含一个列表:
       <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>菠萝</li>
       </ul>
      </td>
      <td>HELLO</td>
    </tr>
    </table>


    <h4>横跨两列的单元格:</h4>
    <table border="1">
    <tr>
      <th>姓名</th>
      <th colspan="2">电话</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
    </tr>
    </table>

    <h4>横跨两行的单元格:</h4>
    <table border="1">
    <tr>
      <th>姓名</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th rowspan="2">电话</th>
      <td>555 77 854</td>
    </tr>
    <tr>
      <td>555 77 855</td>
    </tr>
    </table>


    <table border="1">
    <caption>
    表标题
    </caption>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>


    <table border="1">
    <tr>
    <th>Heading</th>
    <th>Another Heading</th>
    </tr>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

    <h4>带有普通的边框:</h4>  
    <table border="1">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>

    <h4>带有粗的边框:</h4>  
    <table border="8">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>

    <h4>带有很粗的边框:</h4>  
    <table border="15">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>   
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>

    </body>
    </html>

    发现自己的不足,善于利用找到的方法去扬长避短。行动起来。
  • 相关阅读:
    Django--模型层进阶
    Django--模板层
    对自己的博客园主题稍作修改
    集群中Session共享解决方案分析
    【检测工具】keepalived安装及配置
    跨域问题简单分析
    Linux设置静态IP后出现的几种问题
    Linux上安装ElasticSearch及遇到的问题
    Linux上安装JDK1.8,tomcat9,以及mysql8的步骤
    归并排序分析
  • 原文地址:https://www.cnblogs.com/rechen/p/5055902.html
Copyright © 2020-2023  润新知