站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: CSS 网页布局 表格制作实例
搜索:
您的位置: 主页 > 教程 > 网页设计 > CSS > » 正文

CSS 网页布局 表格制作实例

来源: 易采站长站
相反,该用TABLE的地方是提倡使用TABLE的。

例如下面的的布局,你需要用几个DIV来浮动?

demo-table

最合理的方法,就是使用表格来实现表格,经过 HeTingYi 的发布以及 goos 的简化,代码如下:

页面结构:

  1. <table cellspacing="1" cellpadding="0"> <colgroup>     <col class="col1" />     <col class="col2" />     <col class="col3" /> </colgroup> <tr>     <th>游客类别</th>     <th>日票(人民币.元)</th>     <th>夜票(人民币.元)</th> </tr> <tr>     <td>成人</td>     <td>170</td>     <td>100</td> </tr> <tr>     <td>学生</td>     <td colspan="2">125(文章出自 jb51.net 转载请注明出处)</td> </tr> <tr>     <td>儿童</td>     <td>85</td>     <td>50</td> </tr> <tr>     <td>老年</td>     <td>35</td>     <td>30</td> </tr> </table>

CSS部分:

  1. *{     padding:0;     margin:0;     font:12px/1.5em "SimSun"; } body {padding:100px;} table {     width:400px;     text-align:center;     background:#DEE4FF;     border:solid 5px #DEE4FF; } .col1,.col2 {width:30%;} .col3 {width:40%;} th,td {vertical-align:middle;} table th{color:#fff;background:#4F86FF;} table td{color:#2467FA;background:#A1BEFF;}
Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -