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>

  • 相关阅读:
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    block的是发送信号的线程,又不是处理槽函数的线程
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3229805.html
Copyright © 2011-2022 走看看