zoukankan      html  css  js  c++  java
  • table表格

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>table</title>
        <link href="css.css" rel="stylesheet" />
        <style type="text/css">
            table {
            margin:0 auto
            }
            h4 {
            text-align:center
            }
        </style>
    </head>
    <body>
    <h4>横跨两列的单元格:</h4>
    <table border="1" cellspacing="10">
    <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" cellpadding="10">
    <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>


    <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>没有 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>背景颜色:</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">
    <tr>
      <td bgcolor="red">First</td>
      <td>Row</td>
    </tr>  
    <tr>
      <td
      bgcolor="green">
      Second</td>
      <td>Row</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="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>

    </body>
    </html>

  • 相关阅读:
    数据库三大范式另一角度的理解
    Log4j和Slf4j的联系和区别
    cglib和Jdk的对比
    Git- 忽略文件 ignore 无效
    GIT报错:git did not exit cleanly (exit code 1)
    Nginx和Zuul配合使用后,Cookie写入问题
    RabbitMQ报错:undefined: There is no template at js/tmpl/login.ejs
    Feign报错:The bean 'xxxxx.FeignClientSpecification' could not be registered.
    ES报错:NoNodeAvailableException[None of the configured nodes are available
    SpringBoot报错:
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3229805.html
Copyright © 2011-2022 走看看