分享一套简洁大方HTML表格样式


关键词

分享一套简洁大方HTML表格样式

摘要

分享一套简洁大方HTML表格样式,看起来非常舒服、简洁的表格效果,主要用于列数据。
主要分成td和th两种单元格样式,th是表头,td是一般数据。

<style>
table.dataintable {
   border: 1px solid #888888;
   border-collapse: collapse;
   font-family: Arial,Helvetica,sans-serif;
   margin-top: 10px;
   width: 100%;
}
table.dataintable th {
   background-color: #CCCCCC;
   border: 1px solid #888888;
   padding: 5px 15px 5px 5px;
   text-align: left;
   vertical-align: baseline;
}

分享一套简洁大方HTML表格样式,看起来非常舒服、简洁的表格效果,主要用于列数据。
主要分成td和th两种单元格样式,th是表头,td是一般数据。

<style>
table.dataintable {
   border: 1px solid #888888;
   border-collapse: collapse;
   font-family: Arial,Helvetica,sans-serif;
   margin-top: 10px;
   width: 100%;
}
table.dataintable th {
   background-color: #CCCCCC;
   border: 1px solid #888888;
   padding: 5px 15px 5px 5px;
   text-align: left;
   vertical-align: baseline;
}
table.dataintable td {
   background-color: #EFEFEF;
   border: 1px solid #AAAAAA;
   padding: 5px 15px 5px 5px;
   vertical-align: text-top;
}
</style>

<table class="dataintable">
<tr>
   <th>标题1</th>
   <th>标题1</th>
   <th>标题1</th>
   <th>标题1</th>
   <th>标题1</th>
</tr>
<tr>
   <td>内容</td>
   <td>内容</td>
   <td>内容</td>
   <td>内容</td>
   <td>内容</td>
</tr>
<tr>
   <td>内容</td>
   <td>内容</td>
   <td>内容</td>
   <td>内容</td>
   <td>内容</td>
</tr>
<tr>
   <th colspan="5">分页代码</th>
</tr>
</table>

 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:分享一套简洁大方HTML表格样式:http://www.splaybow.com/post/htmltablestyle.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程中有任何疑问,洪哥以此为饭碗,请加QQ:115085382!
了解更多好文章,请关注我们的新浪微博和腾讯微博
亲,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


HTML网页中插入Flash不遮住浮动层 »

相关文章:

HTML 表格  (2015/5/8 17:14:46)

HTML 链接  (2015/5/7 16:26:41)

HTML样式  (2015/5/1 22:54:11)

html代码如何使得背景图片自适应各类浏览器  (2015/4/27 13:31:06)

改变图像的尺寸  (2015/5/5 15:42:07)

DHTML实例  (2015/5/7 11:09:48)

表单的设计  (2015/5/6 10:35:14)

CSS中的边距  (2015/5/5 10:30:19)

HTML元素  (2015/4/29 21:52:57)

jQuery获取select选中的值  (2015/4/24 8:51:57)