利用CSS控制表格外观 - CSS - 网页制作 - 站长资讯 - 一摘网站分类目录-免费收录各类优秀网站的中文网站目录
当前位置:一摘网站分类目录 > 首页 > 资讯首页 > 网页制作 > CSS > 利用CSS控制表格外观

利用CSS控制表格外观

发表时间:2011-07-05内容来源:中国目录网整理  [我要投稿]  [免费提交网站]  转发微博:

  本周,我将介绍这个系列的第三部分,表格边距问题和整个表格布局。

单元格模式

在文档树中,对所有元素都产生一个CSS矩形框,这称为CSS单元格模式。每个单元格有一个内容域,可选周边填充,边界,页边距。当你使用CSS和HTML元素时,需要始终记住单元格模式。

间距

使用HTML表格,你可以利用CSS的规则很容易地定义填充和页边距。关键问题是页边距仅应用于整个表格,而不是某行,列或者单元格。

在列表A中HTML代码利用CSS定义了一个表格的页边距和单元格间距。填充和页边距属性可以单独定义(左,右,上,下),也可以像在前面的例子一样,为一个元素的所有边定义一个页边距。

<html>
<head><title>HTML Table</title></head>
<style type="text/css">
TABLE {
background: blue;
border-collapse: separate;
border-spacing: 10px;
border: 5px dashed black;
margin: 100px;
padding: 0px; }
TD, TH {
background: white;
border: outset 5pt;
horizontal-align: right;
padding: 15px; }
CAPTION {
background: orange;
border: ridge 5px blue;
border-top:
ridge 10px blue;
padding: 5px; }
</style><body>
<table summary="TechRepublic.com - Tables and CSS">
<caption>First Quarter Sales</caption>
<thead><tr>
<th abbr="salesperson" scope="col">Person</th>
<th abbr="sales" scope="col">Sales</th>
</tr></thead>
<tfoot><tr>
<td colspan="2">Let's sell, sell, sell!</td>
</tr></tfoot>
<tbody><tr>
<td>Mr. Smith</td>
<td>600.00</td>
</tr><tr>
<td>Mr. Jones</td>
<td>0000.00</td>
</tr><tr>
<td>Ms. Williams</td>
<td>0000.00</td>
</tr></tbody>
</table></body></html>

列表B定义单独值。同时,你还可以对整个表格使用宽度属性。这样你就可以很容易的定义整个表格大小。

<html><head><title>HTML Table</title></head>
<style type="text/css">
TABLE {
border: 5px solid black;
margin-left: 50px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 40px;
width: 200px;
}
TD, TH {
background: white;
horizontal-align: right; 
padding-top: 15px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px; }
CAPTION {
padding: 0px; }
</style><body>
<table summary="Sample table">
<caption>Super Bowl XLI</caption>
<thead><tr>
<th abbr="team" scope="col">Team</th>
<th abbr="score" scope="col">Score</th>
</tr></thead>
<tfoot><tr>
<td colspan="2">Colts Win</td>
</tr></tfoot>
<tbody><tr>
<td>Colts</td>
<td>29</td>
</tr><tr>
<td>Bears</td>
<td>17</td>
</tr></tbody>
</table></body></html>
           			             

对齐属性

和控制间距一样,你还可以控制每个单元格中数据的对齐属性。有两个对齐选项:垂直对齐和水平对齐。这和HTML TD元素的align和valign属性相对应。你可以使用CSS的文本对齐属性来水平对齐单元格数据和用垂直对齐属性控制垂直布局。下面的代码演示了这两个属性。

TD, TH { text-align: center; vertical-align: middle;}

垂直对齐属性有下面的可能取值:baseline, sub, super, top, text-top, middle, bottom, text-bottom, 和 length。你可以指定一个行高百分比的值。文本对齐属性可能取值为:左对齐,右对齐,中间对齐,最佳对齐。

控制显示

同使用所有HTML元素一样,你可以通过CSS的显示属性控制一个项目在网页上是否显示。下面和表格相关的HTML显示值都是有效的:

table:这相应于块级HTML表格元素。

inline_table:内嵌级HTML表格元素。

table_row:表格内的一行单元格(TR元素)。

table-row-group:一个或多个表格行(TBODY元素)。

table-header-group:显示在表格头部表格标题后的一组行(THEAD 元素)。

table-footer-group:显示在所有行或行组后的一组行(TFOOT元素)。

table-column:表格的一列单元格(COL元素)

table-column-group:表格的一组列(COLGROUP 元素)。

table-cell:表格内的每个单元格(TD元素)。

table-caption:表格标题(CAPTION元素)。

你可以使用这些显示属性来控制一个HTML表格的任何方面的显示与否。例如,你可以设定显示属性来显示一个元素。列表C使用这些属性来控制每个HTML元素的可见性。

<html>

<head><title>HTML Table</title></head>

<style type="text/css">

TABLE    { display: table }

TR       { display: table-row }

THEAD    { display: table-header-group }

TBODY    { display: table-row-group }

TFOOT    { display: table-footer-group }

TD, TH   { display: table-cell }

CAPTION  { display: none }

</style><body>

<table summary="Sample table for TechRepublic.com">

<caption>Super Bowl XLI</caption>

<thead>

<tr>

<th abbr="team" scope="col">Team</th>

<th abbr="score" scope="col">Score</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="2">Colts Win</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Colts</td>

<td>29</td>

</tr>

<tr>

<td>Bears</td>

<td>17</td>

</tr>

</tbody>

</table></body></html>

使用显示属性有趣的方面是用一个表格显示任何元素。也就是说,你可以使用表格显示属性使得每个元素的行为像一个表格一样。这和分配一个相应的显示属性值一样简单。

具体使用

HTML使用说明包括用于操作表格数据的表格,但是很多开发人员仍旧依赖表格进行页面布局。我知道很多开发人员不屑使用HTML表格,但是表格在各种情况下都是可用的。无论目的是什么,表格元素都可以和CSS一起用来控制网站的外观和感觉。

  • 站长资讯刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。
140
最新推荐                    我也要出现在这里 | 更多
快速链接
最新快速审核
中国数字期刊网(www.shiziqikan.com)是提供论文发表、期刊合作、
www.shuziqikan.com
71读小说网是广大书友最值得收藏的网络小说阅读网,网站收录了当前最火最热的网络小
www.71du.com
大香蕉网是专业发放淘宝优惠券天猫超市优惠券的优惠券网站,每天数万种淘宝内部优惠券
www.daxiangjiao1234.com
读客吧汇聚经典原创小说,致力于打造最好最完善的免费网络小说阅读网,网站收录了当前
www.dukeba.com
凭身份证手机贷款✔极速贷款✔快速借款✔分期信用贷款✔网上手机贷款app✔身份证贷
www.maolidai.cn
ADS 广告位招租
一摘开放式网站目录
在线投稿提交网站关于我们帮助中心 广告赞助免责声明 隐私保护最新推荐友情连接意见反馈
Copyright © 2006-2011 一摘网络 版权所有  1zhai.com  All Rights Reserved
在线投稿,网站免费登录,新收录网站首页显示,所有排名全自动实时刷更新,网站推广的最佳选择就在一摘开放式网站目录
Powered by 一摘网络(1zhai.com)    快速审核|投放广告,请点击给我信息快速审核|投放广告
页面执行时间: 202.8 毫秒