分享一套简洁大方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:8771947!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

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