表格介绍及表格的模拟

最新推荐文章于 2021-08-03 22:50:16 发布

soul9999

最新推荐文章于 2021-08-03 22:50:16 发布

阅读量104

点赞数

分类专栏： css 文章标签： IE CSS 浏览器 Opera JavaScript ViewUI

本文链接：https://blog.csdn.net/soul9999/article/details/83438949

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

[size=medium]<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>

效果如下：
[img]/upload/attachment/133684/6b4b7c04-c3a2-3e9f-8fa5-51e202507b5f.bmp[/img]

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;
}

效果如下：
[img]/upload/attachment/133682/8afeb16d-20d0-345a-883f-f159fce9ae26.bmp[/img]
[/size]

最后我们要做出真正自己装饰的表格来：
<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;
}

效果如下：
[img]/upload/attachment/133687/f1084b0c-0f4a-323b-9834-0193a5896822.bmp[/img]