你认为已经知道怎么制做表格了吧。当然,你已经了解 table、tr、td和th标签了,甚至还在你的口袋里装入了rowspan和colspan。你确实可以制做一个精美小巧的咖啡色三合板桌子(表格),但难道你不想做一个优雅稳固,上面有玻璃的,足以承受一头大笨象的宴会桌(表格)?
表格行简直使表格列看起来很愚蠢。同样的工作,表格由行与行构建,让列感到十分沮丧。
但是很幸运,colgroup和col标签来拯救热心的列了。
这两个标签允许你定义表格列和尽你所需地样式化它们,对于你需要把列排成行或不同着色特别有用,如果没有它们,你需要样式化每一个单独的单元格。
这是一个使用这些标签的例子:
Example Source Code [www.52css.com]
<table>
<colgroup> <col /> <col class="alternate" /> <col /> </colgroup>
<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
</tr>
</table>
alternate类的样式将被应用到第二列,或者说每一行的第二个单元格。
你当然可以在colgroup或者col上使用span属性,跟rowspan和colspan有相似的用途
colgroup一起使用可以定义属于列组的行数,比如<colgroup span="2"></colgroup>会组合头两列。当在colgroup使用span时,不应该再使用col标签。
在col里使用span是更明智的,可以,比如,应用在上述例子像这样:
Example Source Code [www.52css.com]
<table>
<colgroup> <col /> <col span="2" class="alternate" /> </colgroup>
...
这将把alternate类应用到最后两列。
注意
Example Source Code [www.52css.com]
哦,但是可能有一个陷井,不是吗?那就是:你仅能样式化列的是边框、背景、宽度和可见性。
Internet Explorer在这方面看起来比其他浏览器表现更好因为它装载有漂亮的CSS属性比如 color,但是,正如结果一样,这是因为它疯狂古怪的行为而已。这种奇特的异常可以让Ian Hixie来解释。
摘要和说明插曲
一个简要和容易的提高易用性的思考是,总是为表格应用摘要和说明。
摘要可以在表格起始标签table中用summary属性应用到表格中。这不会显示,但可以辅助非可视化的表格表现。
caption标签在起始标签table后直接定义说明。它默认直接在表格顶端出现,但可以在CSS属性caption-side中设置top、right、bottom或者left值,尽管IE不会在意。
Example Source Code [www.52css.com]
<table summary="The mating habits of locust, showing how many use protection and how many have a cigarette afterwards">
<caption>Locust mating habits</caption>
...
表头、表注和滚动表格的探讨
thead、tfoot和tbody允许你把表格分为表头、表注和表格主体。对于大表格尤其有用,在打印的时候,表头和表注应该会在每一页都出现。
这些元素必须按thead-tfoot-tbody的顺序定义,像这样:
Example Source Code
[www.52css.com]
<table>
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
...
</tbody>
</table>
你可以让表格主体tbody在基于Gecko的浏览器(Mozilla、Firefox和Netscape 6+等)滚动,通过应用overflow: auto; max-height: [whatever] 的样式。然后你可以看见表头和表注固定,而表的主体右边有滚动条。你应该谨慎使用max-height属性因为IE不认识,比较安全的做法是使用height属性,IE将为它应用到每一行。
注意:说回浏览器的差异,目前IE遇到表头和表注时还是没有什么线索,尽管还是当作表格来处理,但打印的时候不会在哦每一页都出现表头和表注,只孤零零地传递滚动的表格。
分享到:
相关推荐
从基本的HTML代码到复杂的CSS样式和JavaScript交互,表格制作的高级教程涵盖了从创建、编辑、格式化到增强可访问性的全方位知识。通过学习这些内容,用户可以熟练掌握创建高效、美观且易用的表格技巧,提升网页设计...
在本教程中,我们将探讨如何实现高级表格排序功能。在网页中,表格是一种常见的数据展示方式,尤其当数据量较大时,排序功能就显得尤为重要,帮助用户快速找到所需信息。 首先,为了实现表格排序,你需要在HTML文件...
了解了这些基础知识后,HTML初学者可以开始构建简单的网页,并逐步深入学习更多高级的HTML技术,如链接、图片、表格、表单以及CSS和JavaScript等相关的技术和语言,这些都将在网页开发过程中发挥重要的作用。HTML是...
【文件名】"高级表格保证显示(模块+例程)"可能是压缩包中的主文档或者目录,里面可能包含了详细的教程、代码示例或者相关软件的源码,用于展示如何实现高级表格的模块化设计和有效显示。 【知识点详解】 1. **...
DOCTYPE>、<html>、、)、文本格式化标签(如、、)、段落和标题(、至)、链接()、图像()、表格(、、)、列表(、、)等。此外,还可能涉及到更高级的概念,如框架()、表单(、、)和交互元素,以及如何处理...
通过这两个资源,你可以系统地学习并实践HTML的各个方面,从基础语法到高级技巧,逐步提升你的网页制作能力。在学习过程中,实践是关键,尝试自己编写代码并运行查看效果,是掌握HTML的最佳方式。
通过这个“HTML教程chm详细教程”,你将能够全面掌握HTML的基本语法和高级特性,从而更好地创建和维护高质量的网页。无论是初学者还是希望巩固基础知识的开发者,这个教程都是一个宝贵的学习资源。
这个“HTML教程(PDF格式)”提供了全面的学习资源,帮助初学者和有经验的开发者深入理解和掌握HTML的基础及高级概念。 1. **认识HTML语言**:HTML是网页内容的基础,它通过一系列的标签来定义网页的结构和内容。每...
表格的创建也是HTML的重要部分,使用`<table>`、`<tr>`(行)、`<td>`(单元格)和`<th>`(表头单元格)标签。列表则使用`<ul>`、`<ol>`以及`<li>`标签。 超链接是网页交互的关键,`<a>`标签的`href`属性指定链接的...
### HTML高级教程精要 #### 一、HTML布局与表格应用 HTML布局是网页设计的基础,其中使用表格进行布局是一种常见的做法。尽管现代网页设计更倾向于使用CSS Grid和Flexbox等技术,但在早期的HTML中,表格是实现复杂...
《HTML视频教程 》网页制作基础本套教程由,首先介绍下本套视频教程 本套教程以完整的展现模式,为我们讲解了从看不懂.不知道.不会写,以一个零基础的讲解让我们快速学会HTML的视频教程。可以说本套教程是以部非常...
虽然在PPT教程中可能不涉及深入的CSS内容,但了解基本的CSS选择器(如类选择器、ID选择器、元素选择器)和属性(如color、font-size、background-color)将有助于美化HTML页面。 在HTML学习过程中,你还会接触到IDE...
HTML(HyperText Markup Language)是构建网页的...这份PPT教程详细讲解了这些HTML基础知识,对于初学者来说是一份很好的学习资源。通过深入理解并实践这些概念,可以为进一步学习JavaScript和Web开发打下坚实基础。
在本《Dreamweaver CC 从入门到高手视频教程下载第6章 表格网页布局》中,我们将深入探讨如何使用Adobe Dreamweaver CC这款强大的网页设计和开发工具来创建和管理基于表格的网页布局。表格布局是网页设计的基础,...
HTML(HyperText Markup Language)是用于创建网页的标准标记语言,它是互联网的基础,让网页具有结构化的文本内容。...通过这个教程,你将能够创建出自己的静态网页,并逐步迈向更高级的Web开发领域。
本文将深入探讨HTML的重要性,并详细介绍一份全面的HTML教程合集,旨在帮助有志于网页设计和开发的人士从基础到高级技能的全面学习。 首先,让我们了解一下HTML的基本概念。HTML,全称HyperText Markup Language,...
HTML简明教程.pdf:这份PDF教程可能深入浅出地讲解了HTML的标签体系,可能包括表格(table)、表单(form)、输入元素(input)、 div和span等布局控制元素。此外,还可能涉及CSS(Cascading Style Sheets)的初步...
"李炎恢HTML_CSS教程.pdf" 李炎恢的HTML_CSS教程是一本涵盖HTML和CSS基础知识的教程,共30...该教程涵盖了HTML和CSS的基础知识,并对CSS高级特性和布局排版进行了深入讲解,是一本非常适合初学者和中级开发者的教程。