四个好看的table表格样式

最新推荐文章于 2024-04-27 21:35:02 发布
最新推荐文章于 2024-04-27 21:35:02 发布
阅读量7.7w 收藏 65
点赞数 11
分类专栏： 各种样式收集 文章标签： css

1. 单像素边框CSS表格



<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>

<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

2.带背景图的CSS样式表格



<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>

<!-- Table goes in the document BODY -->
<table class="imagetable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

3.自动换整行颜色的CSS样式表格（需要用到JSP）

<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){  
var table = document.getElementById(id);  
var rows = table.getElementsByTagName("tr"); 
 
for(i = 0; i < rows.length; i++){          
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}      
}
}
}

window.οnlοad=function(){
altRows('alternatecolor');
}
</script>


<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>


<!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

4.鼠标悬停高亮的CSS样式表格 (需要JSP)



<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>

<!-- Table goes in the document BODY -->
<table class="hovertable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';">
<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>


下半夜的雨
关注
  • 11
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
漂亮大气的表格样式
12-17
漂亮大气的表格样式
漂亮的table表格样式
06-16
非常漂亮 实现简单 亮蓝色 鼠标移动变色
几种实用table样式
03-29
几种实用table样式
推荐开源项目：Vue-Good-Table - 美观且功能强大的 Vue.js 表格组件
gitblog_00016的博客
03-23 570
推荐开源项目：Vue-Good-Table - 美观且功能强大的 Vue.js 表格组件 项目地址:https://gitcode.com/xaksis/vue-good-table Vue-Good-Table 是一个全面、易用且高度可定制化的 Vue.js 表格组件，旨在提供优雅的数据展示解决方案。它具有许多高级特性，如排序、分页、过滤、自定义列模板等，让你在开发过程中可以轻松处理复杂的表格需...
普通table表格样式及代码大全(全)
别在熬夜了！
08-14 1697
单实线边框表格 虚线边框表格 虚线边框表格 点线边框表格 点线边框表格 双实线边框表格 双实线边框表格 槽线边框表格 槽线边框表格 脊线边框表格 脊线边框表格 内凹效果边框 内凹效果边框 外凸效果边框
几款好看的css表格
热门推荐
HLLLLLL_的博客
03-30 1万+
表格一： 代码： html代码段： 是用vs写的 表头<th>那是从数据库读取的数据段,<td>那是我为测试效果加的代码，大家可以自行更改。 <h1>待处理订单</h1> <table id="all-requst"> <thead> <tr> ...
好看table样式 好看的CSS——Table样式表
04-01
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
table常见样式
weixin_42116238的博客
09-08 1425
【代码】table常见样式
好看的form1
smile725775的专栏
11-08 667
<br /><html> <br /><head> <br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" /> <br /><title>坏狼安全网-漂亮CSS Tables</title> <br /></head> <br /><style type="text/css"> <br />/* CSS Document */ <br />body { <br />font: normal 11px a
几种table表格头部样式以及弹框
Change!
12-05 1371
1.代码如下： 1. :header-cell-style="{background:'#eef1f6',color:'#515a6e'}" 2. :header-cell-style="{background:'#a4beda',color:'#626262'}" 3. :header-cell-style="{background:'#f8f8f9',color:'#515a6e'}" 4. :header-cell-style="{ background: '#EEF3FF', color: '#33
table 样式美化
dengjuanshou7445的博客
08-15 1万+
1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码： 1 <!-- CSS goes in the document HEAD or added to your external stylesheet --> 2 <style type="text/css"> 3 table.gridtable { 4 f...
table样式设置小结
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
10-26 3581
table表格的样式设置虽然不多，但每次用到的时候都要去问度娘,很羞耻，借鉴下官网 1.为表格设置合并边框模型： table{border-collapse:collapse;} 2.给边框设置宽度和颜色: table{border: 1px solid blue;} 3.通过 width 和 height 属性定义表格的宽度和高度 table{width:100%;} th{height:50px;} 4.text-align 和 vertical-align 属性设置表格中文本的对齐方式。 t.
table表格某一td内容太多导致样式混乱的解决方案
09-25
对于有很多条目的数据，我们通常采用table元素来快速实现，如果某一td的内容太多的话就会出现一片混乱，本文提供了不错的解决方案，有需求的朋友可以参考下
用CSS样式描述表格Table边框
09-25
表格边框的处理是CSS网页布局中经常会遇到的内容，在webjx.com中也有过相关的介绍，除了将表格作为一个整体进行定义，您也可以将表格边框的四个部分分别...列表B中的代码将刚才的例子中的表格分成四个部分单独定义。
jQuery 选择表格(table)里的行和列及改变简单样式
01-19
jQuery对表格(table)的处理提供了相当强大的功能，比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好，你可以读读这篇文章：jQuery table manipulation。本文只是介绍如何用jQuery语句...
element-ui表格合并span-method的实现方法
01-19
先看一下合并后的样式,表格第二行,二三四列合并 官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是当前行和列的值,也就是table...
map-table:有关 50 个州的数据的组合地图和表格
07-12
两到四个类别往往效果很好。 您可以将状态和类别的术语更改为您想要的任何内容。 _details列包含显示副本。 这些单元格可以包含常规简介、或空白。 您可以在这些单元格中使用 、 <strong></strong> 、 ...
table-filter:基于 Bootstrap + JQuery 的 HTML 表格过滤插件
06-21
表过滤器基于 Bootstrap + JQuery 的 HTML 表格过滤器插件，您只需将表格的 id 传递给 tableFilter.filter('id of the table') 方法，点击此按钮将打开一个过滤器弹出窗口一个二 1 三1 one2 二 2 三 2 一个3 二三三...
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
最新发布
Demon's blog
04-27 290
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
table-bordered该样式能够将表格
06-02
table-bordered 是 Bootstrap 框架中的一个样式类，它的作用是为表格添加边框线。通过使用 table-bordered 样式类，可以为表格添加上、下、左、右四条边框线，使得表格看起来更加清晰和整洁。同时，表格的数据也更易于阅读和理解。这个样式类通常可以用于需要展示数据的表格中，比如后台管理系统中的数据列表等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值