`
zytszone
  • 浏览: 10642 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

重新发现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)

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

重新认识table

它包含一个标题、头部、主体和底部。正确的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>

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

重新认识table

关于表格的一些技巧

  • 根据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属性?

分享到:
评论

相关推荐

    ExcelToHtmlTable转换算法:将Excel转换成Html表格并展示(项目源码+详细注释+项目截图)

    转换算法的难点在于,如何处理行列合并,将Excel的行列合并模型转换成Html表格的行列合并模型。 背景故事 因实际需要,需要将Excel展现在Web界面中。 最初,想在网上找开源的东东,结果没有1个是想要的。有的特别...

    jquery表格table导出下载成

    为了能够实现前端表格的导出功能,各种尝试发现tableExport是一个很不错的插件。因此最后选择了hhurz的JQuery Plugin来实现表格的导出功能。 可以从下面的地址下载TableExport插件;该插件可以将Html的表格导出成为 ...

    java word转html

    虽然iText-helloworld-master可能不直接与Word转HTML有关,但如果你在项目中发现了这个文件夹,它可能是一个示例项目,演示了如何使用iText进行基本的操作。通常,这样的示例会包括如何初始化iText,添加文本、图片...

    html2fpdf 中文支持

    html2fpdf 或 html2pdf 是在fpdf上开发的一个可以...在实际使用中发现,html2fpdf 对于较为简单的html页面的生成还是较为正确的,但涉及到复制样式或嵌套表格时,生成的pdf文件就不能接受了,在使用上还有很大局限性。

    Word表格使用技巧

    其实只要按下Alt键不松开,然后再试着用鼠标去调整表格的边线,就会发现表格的标尺发生了变化,精确到了0.01厘米,明显精确了许多。 另有妙用的Ctrl和Shift键 通常情况下拖动表格线是在相邻的两列之间调整列宽,...

    word源码java-html2word:html转换成为word文档

    html转word html转换成word文档 项目简介 最近一直在做关于前端富文本生成的html代码转换成word的需求,对各种工具进行了尝试,对效果都不是很满意,最后从茫茫大海中找到一个非常好的工具,顾分享出来 主要转换方式...

    html中table导出成excel、word、txt等

    由于项目需要,关于js将table转为excel,纠结了好久,在网上找了很多资料,前面也上传了两个版本,后来发现问题很多,到目前为止这个版本是兼容性最好。可以自定义文件名,下载表格有边框,有标题,欢迎下载;

    PDF万能转换器 附注册码 pdf转word,excel,PPT,txe,html

    此外,HTML格式还支持搜索引擎优化,有助于提高在线内容的可发现性。 在使用PDF万能转换器时,附带的注册码允许用户激活完整版软件,享受无限制的转换次数和高级功能。这包括批量转换,一次性处理多个PDF文件,大大...

    网络游戏-网络表格语义恢复方法.zip

    因此,需要设计错误检测机制,一旦发现错误,进行重传或恢复操作,保证数据的完整性。 8. **实时更新**:网络游戏中的数据是动态变化的,需要实时监控表格更新,并同步到数据库,确保玩家看到的数据是最新的。 9. ...

    AnyBizSoft PDF Converter(PDF格式转换)

    同时,HTML格式的文件还可以进行搜索引擎优化,提升网页的可发现性。 在使用AnyBizSoft PDF Converter时,用户需要注意的是,尽管软件尽力保持转换后的文件与原始PDF的一致性,但字体、排版和图像质量可能会略有...

    jquery word export 导出html内容(包括图片)

    HTML内容可以是文本、表格、图片等,这些元素都将被转换到Word文档中。在实际应用中,你可能会使用动态生成的HTML,比如从数据库获取的数据。 为了触发导出功能,可以添加一个按钮或者其他交互元素,然后为其绑定一...

    图解Excel与Html格式之间的互相转换.docx

    当你在网页上发现一个有用的表格,但无法直接下载时,可以使用浏览器的“文件”菜单中的“另存为”功能,将网页保存为HTML或HTM格式。确保在保存选项中选择正确的文件类型。 2. **在Excel中导入HTML文件** 打开...

    jQuery实现鼠标可拖动调整表格列宽度

    接下来是创建HTML表格的结构。在这个例子中,我们创建了一个具有五个列的表格,每列的表头都有一个不同的data-resizable-column-id属性,这是因为早期版本的jquery.resizableColumns.js插件需要这样的属性来识别哪些...

    用WPS快速将网页内容转换为WORD文档.docx

    打开HTML文件后,你可能会发现页面上存在许多不需要的元素,如广告、导航栏等。此时,可以通过以下步骤进行清理: 1. **删除不需要的部分**:直接选中这些不需要的内容,按下Delete键删除。 2. **处理表格**:如果...

    10步之内学会HTML

    它构成了互联网的基础,让开发者能够构建结构化的页面,并通过超链接将信息组织在一起。... ...`&lt;head&gt;`包含元信息,如...在学习过程中,不断练习,熟悉各种元素和属性,你会发现HTML其实并不复杂,而是构建网络世界的基石。

    网页快速转换为WPS与WORD文档要如何操作.docx

    例如,如果正文是以表格形式呈现,可以全选表格,然后在WPS的“表格”菜单中选择“转换”——“表格转换为文本”,这将去除表格的外框,使内容更适合文档格式。 完成上述步骤后,网页的主要内容应该已经成功转换为...

    pdf转word软件

    PDF转Word软件是一种工具,专门设计用于将Adobe PDF格式的文档转换成Microsoft Word文档,这样用户就可以在Word中编辑、修改或重新格式化内容。这种转换对于那些需要对PDF文件进行进一步处理,但发现PDF不支持编辑的...

    大数据分析HTML模板.zip

    在大数据分析模板中,HTML负责组织数据可视化组件,如图表、表格和图像,以确保用户能够轻松地导航和理解数据。模板设计者会使用HTML5的最新特性,如Canvas或SVG元素,来实现更高效、动态的数据图形。 接着,我们要...

    Word转Chm帮助文件

    如果发现任何格式错误或缺失内容,需要返回Word进行修正,然后再重新编译。 **编辑和美化CHM文件** 转换后的CHM文件虽然结构清晰,但可能仍需进行一些编辑和美化工作,以提升用户体验: 1. **内容修订**:检查CHM...

Global site tag (gtag.js) - Google Analytics