css做表格样式（如何用css样式表设置表格）

本文目录

• 如何用css样式表设置表格
• 怎么用CSS设置html中的表格边框样式
• 怎么用CSS设置html中的表格边框样式
• CSS样式表怎么做
• 怎么用CSS设置html中的表格边框样式
• 怎么对表格应用CSS样式
• 设置表格CSS样式需要注意什么

如何用css样式表设置表格

.table{
background-color:#000000;表格背景颜色
background-image:url;背景图片
background-position:center;内容位置设定
border:1px;
边框宽度
border-color:#000000;
边框颜色
}
有好多呢
属性
在器
可以看看的

怎么用CSS设置html中的表格边框样式

用CSS设置html中的表格边框样式，要设计的样式非常多，下面举例说明
工具：
记事本
浏览器
方法如下：
CSS代码：

table-a table{border:1px solid #F00}
《!--关键代码：设置表格边框为1像素，实体，红色--》
HTML代码：

《div class="table-a"》
《table width="400" border="0" cellspacing="0" cellpadding="0"》
《tr》
《td width="105"》站名《/td》
《td width="181"》网址《/td》
《td width="112"》说明《/td》
《/tr》
《tr》
《td》网站名称《/td》
《td》具体网址《/td》
《td》网站说明《/td》
《/tr》
《tr》
《td》网站名称《/td》
《td》具体网址《/td》
《td》网站说明《/td》
《/tr》
《/table》
《/div》
效果图如下：

怎么用CSS设置html中的表格边框样式

一、只对表格table标签设置边框

只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。

案例详细如下：

1、对应css代码

《style》 
.table-a table{border:1px solid #F00} 
/* css注释：只对table标签设置红色边框样式 */ 
《/style》

2、对应html代码片段

《div class="table-a"》 
《table width="400" border="0" cellspacing="0" cellpadding="0"》 
《tr》 
《td width="105"》站名《/td》 
《td width="181"》网址《/td》 
《td width="112"》说明《/td》 
《/tr》 
《tr》 
《td》DIVCSS5《/td》 
《td》www.divcss5.com《/td》 
《td》CSS学习《/td》 
《/tr》 
《tr》 
《td》CSS5《/td》 
《td》www.css5.com.cn《/td》 
《td》CSS切图《/td》 
《/tr》 
《/table》 
《/div》

二、对td设置边框

对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。

详细案例教程如下：

1、对应css代码

《style》 
.table-b table td{border:1px solid #F00} 
/* css注释：只对table td标签设置红色边框样式 */ 
《/style》

2、对应html源代码片段

《div class="table-b"》 
《table width="400" border="0" cellspacing="0" cellpadding="0"》 
《tr》 
《td width="105"》站名《/td》 
《td width="181"》网址《/td》 
《td width="112"》说明《/td》 
《/tr》 
《tr》 
《td》DIVCSS5《/td》 
《td》www.divcss5.com《/td》 
《td》CSS学习《/td》 
《/tr》 
《tr》 
《td》CSS5《/td》 
《td》www.css5.com.cn《/td》 
《td》CSS切图《/td》 
《/tr》 
《/table》

三、对table和td技巧性设置表格边框

如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。

解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。

解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。

1、对应css代码：

《style》 
.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} 
.table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} 
/* 
css 注释： 
只对table td设置左与上边框； 
对table设置右与下边框； 
为了便于截图，我们将css 注释说明换行排版 
*/ 
《/style》

2、对应html源代码片段：

《div class="table-c"》 
《table width="400" border="0" cellspacing="0" cellpadding="0"》 
《tr》 
《td width="105"》站名《/td》 
《td width="181"》网址《/td》 
《td width="112"》说明《/td》 
《/tr》 
《tr》 
《td》DIVCSS5《/td》 
《td》www.divcss5.com《/td》 
《td》CSS学习《/td》 
《/tr》 
《tr》 
《td》CSS5《/td》 
《td》www.css5.com.cn《/td》 
《td》CSS切图《/td》 
《/tr》 
《/table》

四、对table和td设置背景，实现完美表格边框

1、基础设置

1）、先设置table css背景为红色

2）、设置table单元之间间距为1
使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化操作步骤简要说明，首先（视图模式）选中表格后，对应DW软件窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing="1"）。

借助DW软件设置表格单元之间间距或直接对《table》标签内cellspacing="1"即可，得到：

《table width="400" border="0" cellspacing="1" cellpadding="0"》 

3）、设置table td背景为白色

2、css代码：

《style》 
.table-d table{ background:#F00} 
.table-d table td{ background:#FFF} 
/* 
css注释：设置table背景为红色，td背景为白色 */ 
《/style》

3、对应html源代码：

《div class="table-d"》 
《table width="400" border="0" cellspacing="1" cellpadding="0"》 
《tr》 
《td width="105"》站名《/td》 
《td width="181"》网址《/td》 
《td width="112"》说明《/td》 
《/tr》 
《tr》 
《td》DIVCSS5《/td》 
《td》www.divcss5.com《/td》 
《td》CSS学习《/td》 
《/tr》 
《tr》 
《td》CSS5《/td》 
《td》www.css5.com.cn《/td》 
《td》CSS切图《/td》 
《/tr》 
《/table》 
《/div》

CSS样式表怎么做

在网页中使用CSS：
一、内部规则 - 直接写在网页文件内部的样式
1.将以下代码插入在与之间可设定此页的默认的样式
2.在HTML行中加入样式规则
如：
Amaze your friends!
二、外部规则 - 独立的样式表文件
1.链接样式表文件
方法：在内使用标签：
如：
并建立一个文本文件，起名mystyles.css (和上面对应)。文件内容如：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
2.输入样式表文件(返回)
方法：在内插入列代码：
并建立一个文本文件，起名company.css (和上面对应)。文件内容如：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
可见该种方法的好处是可与网页的内部样式共存。
三、CSS举例
指定全文的文本格式：
body{background: yellow;color=red; font-size=9pt}
指定局部的默认的文本格式：
P{...}
H1{...}
TH{...}
TD{...}
...
指定超链接的样式：
A:link {text-decoration: none; color:#0000FF; font-family: 宋体}
A:visited {text-decoration: none; color: #800000; font-family: 宋体}
A:active {text-decoration: none; color: #FF0000; font-family: 宋体}
A:hover {text-decoration: underline; color:#FF0000}
推荐你可以上菜鸟教程官网学习

怎么用CSS设置html中的表格边框样式

　　工具：

1. 代码器

2. 浏览器

　　方法如下：

　　CSS代码：

table-a table{border:2px solid red}
《!--关键代码：border设置属性值--》
这里是可以根据需要进行修改的

　　HTML代码：

　　效果图如下：

怎么对表格应用CSS样式

方法一直接写页面上：
《table style="css写这里"》
对于《td》和《tr》同样加上style可直接写css（如《td style="color:#F00"》）
方法二（推荐）
《table class="table1"》
然后在css文件定义table1
.table1{}
对于.table1 里的tr的css可以这样写 .table1 tr{}
同理，td可以这样 .table1 td{}
方法三
《table id="table1"》
然后在css文件定义table1
.table1{}
对于#table1 里的tr的css可以这样写 #table1 tr{}
同理，td可以这样 #table1 td{}

设置表格CSS样式需要注意什么

我们知道，如果表格的CSS样式有很多，今天就给大家详细的讲解一下表格table tr td CSS样式设置， 给table表格设置CSS样式表需要注意哪些方面
在一个网页中多处使用了表格table标签，这个时候给指定的表格对象设置样式依然可以通过CSS进行控制设置。
其实有时我们这样思考将table标签当作DIV标签来布局设置CSS，就变得简单多了。
对table设置样式
通过对应table父级样式命名指定对象内table样式
案例完整HTML+CSS代码
《!DOCTYPE html》
***隐藏网址***
《head》
《meta charset="utf-8" /》
《title》指定对象内table设置样式《/title》
《style》
.p{ width:400px}
.p table{ background:#CCC; color:#F00}
.p table td{ background:#FFF}
《/style》
《/head》
《body》
《p class="p"》
《table width="100%" border="0" cellspacing="1" cellpadding="0"》
《tr》
《td》内容一《/td》
《td》内容一《/td》
《td》内容一《/td》
《/tr》
《tr》
《td》内容二《/td》
《td》内容《/td》
《td》内容《/td》
《/tr》
《/table》
《/p》
《/body》
《/html》小结
以上通过父级指定table和td进行CSS样式设置。
通过对table设置单独id或class
多处使用table表格布局，这个时候如果直接对table标签设置样式，这个时候网页中table表格布局均会受设置。这个时候只需要对table加id或class设置即可区别性对table设置需要CSS样式。
对表格td设置CSS
在表格网页布局中，一般情况下都需要对td设置样式，比如对td设置行高，padding等均是有效果的。
完成HTML+CSS代码如下：
《!DOCTYPE html》
***隐藏网址***
《head》
《meta charset="utf-8" /》
《title》指定对象内table td设置样式《/title》
《style》

.p-td{ width:400px}
.p-td table td{ background:#CCC; color:#000; line-height:40px}
《/style》
《/head》
《body》
《p class="p-td"》
《table width="100%" border="0" cellspacing="1" cellpadding="0"》
《tr》
《td》内容一《/td》
《td》内容一《/td》
《td》内容一《/td》
《/tr》
《tr》
《td》内容二《/td》
《td》内容《/td》
《td》内容《/td》
《/tr》
《/table》
《/p》
《/body》
《/html》对指定表格里td设置样式效果
以上通过CSS指向，设置指定对象里table的td样式。
发散思维：如果想特定表格td设置不同CSS样式，可以对td再加class实现不同样式设置。
相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
怎样让DIV自适应高度
怎样用CSS隐藏图片背景的文字内容
原生js的常用方法整理