设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > 表格CSS样式设置_div+css 学习笔记(三)
表格CSS样式设置_div+css 学习笔记(三)
发布时间: 2014-05-30
了解 CSS
  层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,内容与表现形式是相互分开的。页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 部分)中。使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等。

  CSS 使您可以控制许多仅使用 HTML 无法控制的属性。例如,您可以为所选文本指定不同的字体大小和单位(像素、磅值等)。通过使用 CSS 从而以像素为单位设置字体大小,还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。

在一个网页中多处使用了表格table标签,这个时候给指定的表格对象设置样式依然可以通过CSS进行控制设置。
其实有时我们这样思考将table标签当作DIV标签来布局设置CSS,就变得简单多了。


一、对table设置样式   -   TOP

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> 
2)、案例截图



指定对象内table和td设置CSS样式案例效果截图
3)、小结:
以上通过父级指定table和td进行CSS样式设置。
2、通过对table设置单独id或class
多处使用table表格布局,这个时候如果直接对table标签设置样式,这个时候网页中table表格布局均会受设置。这个时候只需要对table加id或class设置即可区别性对table设置需要CSS样式。

二、对表格td设置CSS   -   TOP

在表格网页布局中,一般情况下都需要对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、截图:


对指定表格里td设置样式效果截图
以上通过CSS指向,设置指定对象里table的td样式。
发散思维:如果想特定表格td设置不同CSS样式,可以对td再加class实现不同样式设置。


文章来源:森动网小鱼儿,转载请注明出处!