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>

  • 相关阅读:
    AndroidWear开发之下载SDK[Android W/Android L]
    Androidの共享登录之方案研究
    AndroidのUI体验之ImmersiveMode沉浸模式
    谷歌Volley网络框架讲解——HttpStack及其实现类
    谷歌Volley网络框架讲解——网络枢纽
    05-使用jQuery操作input的values
    02-jQuery的选择器
    01-jQuery的介绍
    07-BOM client offset scroll 的系列
    06-js中的中的面向对象 定时器
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3229805.html
Copyright © 2011-2022 走看看