首页 > 其他分享 >7款颜色的CSS表格样式美化网页表格

7款颜色的CSS表格样式美化网页表格

时间：2023-03-13 12:44:46浏览次数：59  
标签：style 网页 表格 color rgb table font border CSS

第一种：

CSS表格样式之一

CSS表格样式之一

点击查看CSS代码 
 /* Border styles */
#table-1 thead, #table-1 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
#table-1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}


/* Padding and font style */
#table-1 td, #table-1 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}


/* Alternating background colors */
#table-1 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
#table-1 tr:nth-child(odd) {
background: #FFF
}

 

第二种：

CSS表格样式之二

CSS表格样式之二

点击查看CSS代码 
/* Border styles */
#table-2 thead, #table-2 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
#table-2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}

/* Padding and font style */
#table-2 td, #table-2 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}

/* Alternating background colors */
#table-2 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
#table-2 tr:nth-child(odd) {
background: #FFF
}

 

第三种：

CSS表格样式之三

CSS表格样式之三

点击查看CSS代码 
/* Border styles */
#table-3 thead, #table-3 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(235, 242, 224);
}
#table-3 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(235, 242, 224);
}


/* Padding and font style */
#table-3 td, #table-3 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(149, 170, 109);
}


/* Alternating background colors */
#table-3 tr:nth-child(even) {
background: rgb(230, 238, 214)
}
#table-3 tr:nth-child(odd) {
background: #FFF
}

第四种：

CSS表格样式之四

CSS表格样式之四

点击查看CSS代码 
/* Border styles */
#table-4 thead, #table-4 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(211, 202, 221);
}
#table-4 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(211, 202, 221);
}


/* Padding and font style */
#table-4 td, #table-4 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(95, 74, 121);
}


/* Alternating background colors */
#table-4 tr:nth-child(even) {
background: rgb(223, 216, 232)
}
#table-4 tr:nth-child(odd) {
background: #FFF
}

 

第五种：

CSS表格样式之五

CSS表格样式之五

点击查看CSS代码 
 /* Table Head */
#table-5 thead th {
background-color: rgb(156, 186, 95);
color: #fff;
border-bottom-width: 0;
}


/* Column Style */
#table-5 td {
color: #000;
}
/* Heading and Column Style */
#table-5 tr, #table-5 th {
border-width: 1px;
border-style: solid;
border-color: rgb(156, 186, 95);
}


/* Padding and font style */
#table-5 td, #table-5 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}

 

第六种：

CSS表格样式之六

CSS表格样式之六

点击查看CSS代码 
/* Table Head */
#table-6 thead th {
background-color: rgb(128, 102, 160);
color: #fff;
border-bottom-width: 0;
}


/* Column Style */
#table-6 td {
color: #000;
}
/* Heading and Column Style */
#table-6 tr, #table-6 th {
border-width: 1px;
border-style: solid;
border-color: rgb(128, 102, 160);
}


/* Padding and font style */
#table-6 td, #table-6 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}

 

第七种：

CSS表格样式之七

CSS表格样式之七

点击查看CSS代码 
/* Table Head */
#table-7 thead th {
background-color: rgb(81, 130, 187);
color: #fff;
border-bottom-width: 0;
}


/* Column Style */
#table-7 td {
color: #000;
}
/* Heading and Column Style */
#table-7 tr, #table-7 th {
border-width: 1px;
border-style: solid;
border-color: rgb(81, 130, 187);
}


/* Padding and font style */
#table-7 td, #table-7 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}

 

以上7种颜色的CSS表格样式部分，根据我们自己的需要可以直接复制不同的颜色部分加上行列的修改。然后加在下面的TABLE表格部分中：

点击查看CSS代码 
<table id="table-1"> <!-- Replace "table-1" with any of the design numbers -->
<thead>
<th>Name</th>
<th>City</th>
<th>Phone</th>
</thead>
<tbody>
<tr>
<td>Albert Ellis</td>
<td>New York</td>
<td>+1 718 000000</td>
</tr>
<tr>
<td>Marcus Aurelius</td>
<td>Rome</td>
<td>+1 718 000000</td>
</tr>
<tr>
<td>Epictetus</td>
<td>Greece</td>
<td>+1 718 000000</td>
</tr>
<tr>
<td>Aristotle</td>
<td>Greece</td>
<td>+1 718 000000</td>
</tr>
</tbody>
</table>

 

标签：style,网页,表格,color,rgb,table,font,border,CSS
From： https://www.cnblogs.com/sixty-five/p/17210950.html

相关文章

  • CSS颜色代码速查表【英文颜色、HEX格式、RGB格式】(转）
    使用实例英文代码使用实例：<pstyle="color:red">Thisismyfont</p>HEX格式使用实例： <pstyle="color:#FFB6C1">Thisismyfont</p>RGB格式使用实例： <pstyl......
  • css设置正方形动态背景
    .wrapper{background:#50a3a2;background:-webkit-linear-gradient(topleft,#50a3a20%,#53e3a6100%);background:linear-gradient(tobottomrig......
  • 小程序扫码登录网页应用
    详细实现方式以及代码下载请前往https://www.passerma.com/article/85一、整体实现思路前端调用接口生成带唯一scene参数的小程序码，并定时器获取该参数登录状态用户扫......
  • 表格1
    表格1这就是表格标题标题单元格标题单元格标题单元格标题单元格标题单元格单元格1单元格1单元格1单元格1单元格1单元格2单元格2单元格2单元格2单元格2......
  • 在chrome-console中进行xpath/css/js定位（六）
    1.xpathconsole中调用xpath的基本格式：$x("xpath表达式")1.1绝对定位与相对定位绝对定位：$x("/xpath表达式")相对定位：$x("//xpath表达式") 1.2通配符与不包含筛......
  • jupyter notebook网页形式打开
    一、打开AnacondaPrompt,通过输入condainstalljupyternotebook来安装jupyter模块  二、切换到想要开发代码的目录，输入命令jupyter-notebook.exe ......
  • css作用 文本样式
    <doctypehtml><html><head>  <metacharset="utf-8">  <title>study</title>  <linkrel="stylesheet"href="study.css"type="text/css">  <sty......
  • css实现画面转场以及边框线条动画
    效果预览在实现转场效果之前，需要先了解css的clip-path属性，该属性就是实现转场的核心属性，clip-path属性可以使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的......
  • 自适应与响应式网页设计
    现代网站需要在每个屏幕上都具有良好的外观和功能。这不完全是新闻快报，因为网页设计师多年来一直被告知这一点。但是实现它的方法不止一种，例如自适应设计和响应式设计，我们......
  • 如何禁用 HTML 或 CSS 中文本区域的大小调整
    在这个快速提示中，我们将向您展示2种不同的方法来禁用调整a的textarea大小，以防您不希望用户能够以这种方式控制它。这是一个相对较快的过程，只需一些使用resizeCSS属性......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99