表格介绍及表格的模拟

objet888

浏览: 61309 次
性别:
来自: 东莞

最近访客更多访客>>

ysj0109

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

IE CSS 浏览器 Opera JavaScript

<body>
<ul class="news2">
   <li><span>[广东]</span>这里没电了</li>
   <li><span>[四川]</span>这里也没电了</li>
   <li><span>[上海]</span>郁闷!同上,没电啊~</li>
   <li><span>[北京]</span>挖哈哈 ^_^ 这里有电~</li>
   <li><span>....</span>........</li>
</ul>

<style>
ul.news2{
width:400px;
list-style-type:none;
}

ul.news2 li{
text-align:left;/*这回向左对齐,因为我们要把span浮到右边*/
}

ul.news2 li span
{
float:right;/*我浮我浮我浮浮浮,我在右边了*/
display : inline;
}
</style>
</body>

效果如下：

2、三列多行的数据显示:

这里依然选择文章列表来做演示,选择标签为ol,li,a,address,i.当然,你也可以依照你的文档资料选择如span,b,s等来做

<ol class="art">
     <li><a herf="#" title="...">[原创:JS]由浅到深了解JavaScript类</a><address>笨红</address><i>2-9</i></li>
     <li><a herf="#" title="...">[原创:CSS]正确认识html与body </a><address>一叶千鸟</address><i>2-8</i></li>
     <li><a herf="#" title="...">[灌水:泡MM]没有MM的日子怎样过</a><address>嗷嗷</address><i>2-8</i></li>
     <li><a herf="#" title="...">........</a><address>....</address><i>....</i></li>
</ol>

CSS部分

ol.art{
list-style-type :none;
}
ol.art li{
clear:both;/*清行*/
}
ol.art li a{
width:500px;/*定义宽度只是发了对齐*/
float:left;display:inline;/*不能路过就浮过吧*/
}
ol.art li address{
width:100px;
font-style : normal;/*中文斜体不是很好看的说*/
float:left;display:inline;
}
ol.art li i{
font-style : normal;
float:left;display:inline;
}

效果如下：

最后我们要做出真正自己装饰的表格来：
<table class="tab">
   <caption>表名</caption>
   <colgroup class="g1" span="3" >
     <col class="c1" />
     <col class="c2"/>
     <col class="c3"/>
   </colgroup>
   <colgroup class="g2" span="1" >
   </colgroup>
   <thead>
     <tr>
       <th>表头1</th>
       <th>表头2</th>
       <th>表头3</th>
       <th>表头4</th>
     </tr>
   </thead>
   <tfoot>
     <tr>
       <td>表底1</td>
       <td>表底2</td>
       <td>表底3</td>
       <td>表底4</td>
     </tr>
   </tfoot>
   <tbody>
     <tr>
       <td>行1列1</td>
       <td>行1列2</td>
       <td>行1列3</td>
       <td>行1列4</td>
     </tr>
     <tr>
       <td>行2列1</td>
       <td>行2列2</td>
       <td>行2列3</td>
       <td>行2列4</td>
     </tr>
      <tr>
       <td>行3列1</td>
       <td>行3列2</td>
       <td>行3列3</td>
       <td>行3列4</td>
     </tr>
     <tr>
       <td>行4列1</td>
       <td>行4列2</td>
       <td>行4列3</td>
       <td>行4列4</td>
     </tr>
   </tbody>
</table>
css部分：

table.tab{
border :1px black solid;
}

table.tab .g1 .c1
{
background-color :Yellow;
width:50px;
}
table.tab .g1 .c2
{
background-color :   Lime;
width : 100px;

}
table.tab .g1 .c3{
background-color :   Green;
width : 140px;
}
table.tab colgroup.g2{
background:Teal url("http://rotui.net/images/bg.jpg" ... nbsp;top center;
width : 200px;
/* IE only start */
/* 非IE的浏览器都不支持非width background以外的定义 */
color : White;
text-align : right;
/* IE only end */
}
table.tab thead th
{
background-color : Black;/*由于colgroup 定义了背景 th没定义会因浏览器不同解析不同*/
/*IE,Opera,Netscape会使用colgroup 定义的背景   MOZ系列的不会非WIN系统浏览未测试 */
color : White;
}
table.tab tfoot td
{
background-color : Gray;
}

效果如下：