零基础建站培训介绍

当前位置:

CSS控制table表格样式(边框、边距)

在一个网页中多处使用了表格table标签,这个时候给指定的表格对象设置样式依然可以通过CSS进行控制设置。

其实有时我们这样思考将table标签当作DIV标签来布局设置CSS,就变得简单多了。

一、对table设置样式

1、通过对应table父级样式命名指定对象内table样式

1)、案例完整HTML+CSS代码


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>指定对象内table设置样式</title>
<style>
.divcss5{ width:400px}
.divcss5 table{ background:#CCC; color:#F00}
.divcss5 table td{ background:#FFF}
</style>
</head>
<body>
<div class="divcss5">
<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>
</div>
</body>
</html>

以上通过父级指定table和td进行CSS样式设置。

2、通过对table设置单独id或class

多处使用table表格布局,这个时候如果直接对table标签设置样式,这个时候网页中table表格布局均会受设置。这个时候只需要对table加id或class设置即可区别性对table设置需要CSS样式。

二、对表格td设置CSS

在表格网页布局中,一般情况下都需要对td设置样式,比如对td设置行高,padding等均是有效果的。

1、完成HTML+CSS代码如下:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>指定对象内table td设置样式</title>
<style>

.div-td{ width:400px}
.div-td table td{ background:#CCC; color:#000; line-height:40px}
</style>
</head>
<body>
<div class="div-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>
</div>
</body>
</html>

2、效果如下图:
CSS控制table表格样式

以上通过CSS指向,设置指定对象里table的td样式。

发散思维:如果想特定表格td设置不同CSS样式,可以对td再加class实现不同样式设置。

下一课:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • CSS怎么隐藏DIV (4026 次浏览)
    CSS怎么隐藏DIV?要使用这样的属性:display:none在布局中要隐藏DIV,只必要对div配置display:none属性就可。以下是直接DIV设置埋伏名堂代码
  • CSS怎么隐藏DIV内容 (4035 次浏览)
    一般情况下,css隐藏的用途,如下:1、对文本的隐藏2、隐藏超链接(另类黑链)3、对统计代码隐藏4、隐藏超出图片5、css隐藏滚动条6、css隐藏div
  • css 注释方法 (4109 次浏览)
    CSS注释(css 注释)是有css文件代码间加入注释,解释说明意思。CSS注释有着注解说明之用,常常我们使用CSS注解进行对CSS代码或布局CSS样式进行特别说
  • 什么是css文件?css文件应该想到是文件之类的什么东西,那就没错,css文件是指css代码放到一个单独的文件里,并以css扩展名命名如yangshi.css,这样
  • CSS 加粗这里指的是通过DIV CSS控制对象的加粗。使用CSS属性单词font-weight对象值:从100到900,最常用font-weight的值为boldfont-weight参数:
  • 你需要具备的知识在继续学习之前,你需要对下面的知识有基本的了解:HTML / XHTML什么是 CSS?CSS 指层叠样式表 (Cascading Style Sheets)样式