zoukankan      html  css  js  c++  java
  • 网页设计之路(4)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    <table border="3" bgcolor="#0099FF" > <!--表格边框大小由table 控制,包括边框眼色,tr服从table-->
    <tr>
    <th> Heading</th>
    <th> Heading</th>
    </tr>
    <tr bgcolor="#FFFF00" >
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <table border="1"><!--border大小默认为0-->
    <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>
    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td></td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    <table border="1">
    <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>
    <h4>这个表格没有边框:</h4>
    <table cellpadding="10" border="1" cellspacing="10">
    <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="0">
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    </tr>
    </table>
    <table border="1" background="../MINE/7acb0a46f21fbe09097914fd6a600c338744ad30.jpg">
    <tr>
    <th> name</th>
    <th colspan="3"> sex</th>
    </tr>
    <tr>
    <td>wang</td>
    <td>nv</td>
    <td> nm</td>
    <td> mv</td>
    </tr>
    <table border="2" background="../MINE/1172050490dd5dcabao.jpg">
    <tr>
    <th>
    head
    </th>
    <td>22</td>
    </tr>
    <tr >
    <th rowspan="3">
    head2
    </th>
    <td>333</td>
    <tr > <td > 44</td></tr>
    <tr>
    <td>这个单元包含一个列表:
    <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
    </ul>
    </td>
    </tr>

    </table>
    <table frame="hsides"><!--表格边框控制。我不知道有啥用-->
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    </table>
    <br />
    <table width="50%" border="1">
    <colgroup>
    <col align="left" />
    <col align="center" />
    </colgroup>
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    </table>
    <table border="1" width="50%">
    <colgroup>
    <col span="2" style="background-color:red" align="right">
    <col style="background-color:yellow" align="right">
    </colgroup>
    <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
    </tr>
    <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
    </tr>
    </table>
    </body>
    </html>

    这主要是table的练习,这还是比较好玩的。

  • 相关阅读:
    收集常用的.net开源项目
    前端兼容性
    IntelliJ IDEA 14 注册码生成器
    Web开发者的10个最好的云开发环境
    [置顶] 浅谈大型web系统架构
    简单的前端js+ajax 购物车框架(入门篇)
    CSS3 background-size图片自适应
    CSS clip:rect矩形剪裁功能及一些应用介绍
    Aspx 页面生命周期
    Asp.Net页面(母版页)加载顺序
  • 原文地址:https://www.cnblogs.com/chufengpeng/p/4003300.html
Copyright © 2011-2022 走看看