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>

  • 相关阅读:
    Codeforces Round #350 (Div. 2) F. Restore a Number 模拟
    Codeforces Round #374 (Div. 2) C. Journey DP
    Codeforces Round #375 (Div. 2) D. Lakes in Berland DFS
    Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) D. Generating Sets 堆
    Ubuntu 安装 搜狗输入法
    Ubuntu 搜索不到WIFI或连接不上的解决方法
    Ubuntu 线缆被拔出问题
    Codeforces Round #357 (Div. 2) D. Gifts by the List DFS
    Codeforces Round #357 (Div. 2) C. Heap Operations 优先队列
    Codeforces Round #356 (Div. 2) C. Bear and Prime 100 交互题
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3229805.html
Copyright © 2011-2022 走看看