包含 css 标签的文章

重新发现HTML表格

根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后,决定写这篇文章。总的来说,我注意到由于误导性信息,他们对于table的使用有种先入为主的厌恶。事实上很多人会说”我看到永远不应该使用表格”的说法,但是这绝对是错误的!这个建议只是针对使用HTML表格来定义网页的布局,但是表格在方便的排列数据信息行和列方面非常完美,而且如果你一定要在一个页面上显示表列数据,你就不得不使用它们!为什么不呢?然而,在这种情况下,一些人无视了用于table的某些HTML标签的存在并且不知道该如何正确的使用它们。

 

HTML有10个表格相关标签。下面是一个带有简介的列表,但是首先,文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面:

  • <caption> 定义表格标题(4, 5)
  • <col> 为表格的列定义属性(4, 5)
  • <colgroup> 定义表格列的分组(4, 5)
  • <table> 定义表格(4, 5)
  • <tbody> 定义表格主体(4, 5)
  • <td> 定义一个单元格 (4, 5)
  • <tfoot> 定义表格的表注(底部)(4, 5)
  • <th> 定义表格的表头 (4, 5)
  • <thead> 定义表格的表头(4, 5)
  • <tr> 定义表格的行(4, 5)

一个基本的表格结构如下:

[attach=196]

 

它包含一个标题、头部、主体和底部。正确的HTML元素顺序是:

  1. <table>
  2. <caption>
  3. <thead>
  4. <tfoot>
  5. <tbody>

你也可以使用<col><colgroup> 来定义表格的列或为列分组:

  1. <table>
  2. <caption>
  3. <colgroup>
  4. <col>
  5. <thead>
  6. <tfoot>
  7. <tbody>

下面是一个正确的表格结构实例:

<table border="1">
	<caption>Table caption here</caption>
	<colgroup span="1" style="background:#DEDEDE;"/>
	<colgroup span="2" style="background:#EFEFEF;"/>
 
	<!-- Table Header-->
	<thead>
	<tr>
		<th>Head 1</th>
			<th>Head 2</th>
			<th>Head 3</th>
		</tr>
	</thead>
 
	<!-- Table Footer-->
	<tfoot>
		<tr>
			<td>Foot 1</td>
			<td>Foot 2</td>
			<td>Foot 3</td>
		</tr>
	</tfoot>
 
	<!-- Table Body-->
	<tbody> 
		<tr>
			<td>A</td>
			<td>B</td>
			<td>C</td>
		</tr>
		<tr>
			<td>D</td>
			<td>E</td>
			<td>F</td>
		</tr>
	</tbody>
</table>

在浏览器中的结果如下图所示:

[attach=197]

 

关于表格的一些技巧

  • 根据w3schools的解释和用法,在一个table定义中,<tfoot>元素必须出现在<tbody>之前,这样,浏览器就可以在接受到所有数据之前呈现表注了。另外,如果不是这个顺序,将不能通过W3C的HTML4和XHTML验证,无论你声明哪种DTD。(了解更多)。
  • 在 HTML 4.01 中,表格的alignbgcolor属性不赞成使用,所以在HTML 5中不再有任何table的属性被支持(事实上,在XHTML 1.0 Strict DTD中已经不支持”align”和”bgcolor”属性了);
  • 所有主流浏览器都支持<colgroup> 标签,但是Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性;
  • css中的empty-cells:show|hide 可以设定空单元格是否显示边框。注意,这个需要设置在table而不是td/th中。IE6中比较容易遇到该问题;
  • css中的border-collapse:collapse | separate 可以设置表格的边框是否被合并成一个边框;
  • css中的border-spacing属性等效于table的cellspacing属性。

为了实现现在所提倡的表现和结构分离的开发模式,前端观察建议将页面中所有与表现层有关的东东,都用CSS来控制,不用HTML自带的属性来控制页面的表现,而table是最容易被忽略的一个。

关于table的更多详细内容可以查看W3C的文档: w3 Introduction to tables

最后留一个非常简单的问题给大家,CSS的哪个属性等效于table的cellpadding属性?

中文原文:重新发现HTML表格
整理自:Woork

CSS 内部居中浮动实现(float center)

我们都知道及float:left; 和 float:right;,但是否想过 float:center; 呢?

看下面这段代码:

<div class="fpage">
    <ul>
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
    </ul>
</div>

我们想让 .fpage 内的 li 的整个区域浮动居中显示,这里面的 li 数量未知,ul 的宽度也是未知。当然我们可以让给 .fpage 一个 text-align:center; 但这并不是我们的初衷,很多时候我们必须得使用浮动。
这里我们得先重温一下 position:relative; 它将依据 left, right, top, bottom 等属性在正常文档流中偏移位置。那我们可以让 ul 为position:relative;left:50%,然后再让 li 向左浮动,在让它 position:relative;right:50%(或者left:-50%),那么 li 就有了我们想要的居中浮动效果啦!

CSS:

.fpage {
    position:relative;
    width:100%;
    height:80px;
    background-color:#eee;
    text-align:center;
    overflow:hidden;
}
.fpage ul {
    float:left;
    position:relative;
    left:50%;
    list-style:none;
}
.fpage ul li {
    position:relative;
    right:50%;
    float:left;
    margin:10px;
    padding:0 10px;
    border:solid 1px #000;
    line-height:60px;
}

下载这个实例:[attach=160]

CSS布局参考资料:IE的IF条件注释使用备忘

在CSS布局中,还常常用到IE Hack。if IE起着非常大的作用!
if IE什么意思呢?下面就列举了一些在CSS常见的HACK控制语句。
作为IE的IF条件注释使用备忘,大家可以参考,有经验欢迎与52CSS.com的网友分享。

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

<!--[if IE]> 所有的IE可识别 <![endif]-->

<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->

<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->

<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->

<!--[if IE 6]> 仅IE6可识别 <![endif]-->

<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

<!--[if IE 7]> 仅IE7可识别 <![endif]-->

<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

本文章转自我爱CSS: http://www.52css.com/article.asp?id=872

前两天做的侧栏功能菜单与后台界面

脑子里突然有了一个想法,就做出来了,还有最近学到的一个ASP后台,觉得原后台又小气又丑,于是把后台整个界面重新设计了一下.
原后台样式
[attach=88]
重做后的后台样式
[attach=89]

最关键的是左边的下拉菜单,使用了JQUREY,这东西的选择器的各种效果实现起来真的很方便啊,一开始做好后第二天在朋友的电脑IE7上预览总是提示JQUERY的选择器符 $ 处找不到对象,怎么看也看不出来问题,郁闷了半天,中间偶尔一次又正常了,就一次,我就纳闷了,难道IE6,FireFox,Opera都支持的IE7这种更高版本的却不行?又偶尔一次以前给他装的畅游巡警报警说网页有木马,文件就是 jquery.js ,然后才知道,我靠,居然是畅游巡警把 jquery 的脚本文件当成挂马的脚本给屏蔽了,关闭畅巡游巡就一切正常了,怪不得 jquery 的语句全都不生效呢,不过就算 jquery 语句不生效,仅仅影响了菜单的展开的收缩效果而已,其它的都还是正常地,呵呵,下看。
看图:

[attach=90] 这是正在做的一个网站界面,小看一下,哈哈:
[attach=91]

演示地址:http://www.vgot.net/design1/Manage/Manage.html
还有一点我纳闷的是,我检查了  jquery 的文件一切正常啊,从官网上下载了原文件对比没有不一样的地方,还有我的首页上也使用了 jquery 的效果,为什么用他的 IE7 浏览我的首页一切正常呢,这个下拉菜单却报了?

最近设计的一个登陆界面

前面图片使用PNG透明而成,兼容 IE,FF,OP 其它的浏览器未测试,呵呵,用在了新华学院的校园网盘系统登陆上。

演示地址:http://www.vgot.net/design1/Login/Login.html