重新发现HTML表格(2)
来源:前端观察 发布时间:2009-12-02 09:47:00
下面是一个正确的表格结构实例:
<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>
在浏览器中的结果如下图所示:
关于表格的一些技巧
根据w3schools的解释和用法,在一个table定义中,<tfoot>元素必须出现在<tbody>之前,这样,浏览器就可以在接受到所有数据之前呈现表注了。另外,如果不是这个顺序,将不能通过W3C的HTML4和XHTML验证,无论你声明哪种DTD。(了解更多)。
在 HTML 4.01 中,表格的align和bgcolor属性不赞成使用,所以在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属性?
猜你喜欢
- 五、XML带来的好处 (1)更有意义的搜索 数据可被XML唯一的标识。没有XML,搜索软件必须了解每个数据库是如何构建的。这实际上是不可能的
- This is a {t}. {name}是一个很强大的字符串模板解析方法。它接受三个参数,分别是{args.text},{args.obj
- jQuery 将马上发布 1.4 正式版,代码也从 googlecode 上迁移到了 github. jQuery 是我接触的第一个 JS
- 没事在这里发一下关于数据库大批量插入数据的效率对比,用ACCESS和MSSQL,数值是在本机测试,根据不同的环境和配置,数值可能会有较大差别
- 客户强烈要求使用淘宝的首页商品分类效果,很BT~,没辙就满足一下人家的需求。通过淘宝案例,立即想到了显示/隐藏层的效果,于是在DW中画了几个
- 当需要制作转动鼠标滚轮放大页面字体这样的交互效果时,会用到 Mousewheel 事件。其实在大多数浏览器(IE6, IE7, IE8, O
- 引伸阅读解读absolute与relativeposition:relative/absolute无法冲破的等级定位一直是WEB标准应用中的
- 这方面我还是一个freshman,不过看了一些文章,经过一些实践后也算是有了一些想法。希望如果有这方面的前辈路过的话,能不吝指教。首先,作为
- 代码如下: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%&
- 我们可用ADO STREAM来做一个无组件的上传程序。Stream对象包含了许多操作二进制和文本文件的方法,我们现在用Stream对象来操作
- 一、偏好资源的积累利用DreamWeaver 4制作网页会应用到许多各种类型的要素,比如色彩、图片、模板、脚本等。利用站点资源面板将这些东东
- 代码如下:'文字水印 Function WordWatermark(ImagePath) Dim&nb
- CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色、大小、距离等静
- 很多设计师都会遇到这样的问题。一个产品会有很多种方式去包装,其中包括很多功能和很多体验。功能越多会被认为越实用,体验越好会被认为越方便。方便
- 先看下面例子的效果:<INPUT TYPE="text" NAME=""&
- 下面的request.servervariables例子都是服务器探针采用的asp代码本机ip:<%=request.serverva
- 一般我们是利用Session对象来防止通过“刷新”增加计数器的访问量的,看看下面的做法;<%If IsEmpty(Sessi
- 1概述 SQL语言的本质就是一串伪代码,表达的是做什么,而不是怎么做的意思。如其它语言一样,SQL语句需要编译之后才能运行,所以每一条SQL
- 首先呢,需要有两个mysql服务器。如果做测试的话可以在同一台机器上装两个mysql服务程序,注意要两个运行程序的端口不能一样。我用的是一个
- 连续看到几个和 Oracle 优化器隐含参数 _sort_elimination_cost_ratio 相关的优化案例(Refer Refe