CSS修饰的表格
来源:互联网 发布:二维数组先定义 再赋值 编辑:程序博客网 时间:2024/05/01 00:38
下面这个CSS样式的表格,个人感觉颜色起到了很大的作用。如果不是两种颜色的对比效果好,可能也就是一般的表格:
先来看HTML:
<table width="590" cellspacing="1">
<caption>
text
</caption>
<thead>
<tr>
<th class="line1" scope="col">text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th class="line4" scope="col">More</th>
</tr>
</thead>
<tbody>
<tr>
<th height="78">text text text text</th>
<td>text text text text</td>
<td>text text text</td>
<td class="line4"> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
上面的表格没有什么要解释的,建议大家用thead,tbody,tfoot这些具有语义的标签。
body{
background-color:#D5DFE9;
}
table{
border-spacing:1px;
border:1px solid #A2C0DA;
}
td, th{
padding:2px 5px;
border-collapse:collapse;
text-align:left;
font-weight:normal;
}
thead tr th{
background:#B0D1FC;
border:1px solid white;
}
thead tr th.line1{
background:#D3E5FD;
}
thead tr th.line4{
background:#C6C6C6;
}
tbody tr td{
height:50px;
background:#CBE2FB;
border:1px solid white;
vertical-align:top;
}
tbody tr td.line4{
background:#D5D6D8;
}
tbody tr th{
height:50px;
background: #DFEDFF;
border:1px solid white;
vertical-align:top;
}
caption,tfoot{
display:none;
}
#btn{
text-align:center;
}
.txt{
width:200px;
height:20px;
}
上面的样式没有特别的地方。欢迎大家留言。
- CSS修饰的表格
- css修饰表格
- 【HTML】对于表格的修饰
- 表格的css,细线表格
- CSS对文本框的修饰
- 大气的表格css
- 表格的css样式
- 表格的CSS设计
- css 表格的应用
- 用CSS修饰我的博客
- 防止表格被撑宽的css
- css的表格颜色切换
- 单线表格的css文件
- ul li css 的表格
- CSS 表格的典型实例
- 一个简单的Css表格
- Css表格布局的百分比
- css-表格的美化总结
- 一、做饭哪些事儿
- Linux上构筑iPhone OS3.1.2开发环境之build
- C#==> 列表( List, ArrayList。。。)
- C++惯用法之RAII
- 内功修炼(一) 寻找潜在的机会
- CSS修饰的表格
- 美国顶级大学令人心痛的地狱式计算机教学
- denyhost:有效阻止ssh暴力破解
- 过滤分享的Chrome扩展开发详解
- Oracle10g安装时检查网络配置需求未通过问题的解决方法
- 用vc编写任务管理器杀不掉的进程
- c++primer 习题9.43
- ie6 ie7 的div 对 display:inline-block的解析
- geekos项目project1代码