HTML表格：高效布局数据与利器.pdfVIP

HTML表格：高效布局数据与利器.pdf

幻灯片3

在HTML中，表格使得以网格形式布局数据、文本甚至图像变得容易。表格有助于以表格形式展

示数字数据（这些数据自然地出现在电子表格和其他类似应用程序中）。但表格也使展示所有

自然分为行和列的信息变得简单方便，并且在介绍大量术语或其他项目时，可以最大化利用空间，

避免过多的空白浪费。

当你有许多数字或大量自然分为行和列的文本信息时，表格会非常有用和信息丰富。更重要的

是，它们了在网页上展示此类信息最紧凑和清晰的方式，因此你应该为此目的使用它们。

幻灯片5

在这两个之间，你可以找到以下元素，顺序非常有趣且规定（换句话说，强制性）：

✓零个或一个caption元素用于定义表格的标题（如果存在这样的元素，则表示有标题；如果

不存在，则表示没有标题）。如果使用了caption元素，它必须紧跟在table开始。

✓零个或一个列组（colgroup）元素用于定义表格的列组（如果存在这样一个元素，或者如果

没有该元素则没有列组）。它必须出现在任何caption元后（如果存在），并且在以下任何表

格元前。

幻灯片6

零个或一个表头（thead）元素用于定义表格的标题部分（如果存在这样一个元素，或者如果

没有该元素则没有表头部分）。通常，第一个表头行会整个表格的宽度以标识整个表格，而

第一个表头行后面跟着第二个行，其中包含每个列的单独标题。

幻灯片7

✓零个或多个表格主体（tbody）元素用于标识表格的实际内容。一个表格可以有多个

tbody元素，因此在HTML中比较特殊，即一个表格只能有一个头部但可以有多个主体！

✓如果没有tbody元素存在（通常在定义了表头并可能还有表尾部分的表格中定义表体），则

表格行（tr）元素定义了实际呈现的数据行。

slide3

InHTML,tabmakeiteasytolayoutdata,text,andevenimagesinagrid.Tabhelpmakeiteasyto

presentnumericaldata(whichnaturallyappearsintabularforminspreadsheetsandothersimilar

applications).Buttabalsomakeiteasyandconvenienttopresentallkindsofinformationthat

naturallyfallsintorowsandcolumns,andtohelpizespacewhenintroducinglotsoftermsor

otheritemsthatwouldwastetoomuchwhitespaceifrunupagainsttheleftorrightmarginsonapage.

Whenyouhavelotsofnumbersornumerousfieldsoftextinformationthatfallnaturallyintorowsand

columnstabcanbeusefulandinformative.What’smore,theyprovidethemostcompactand

intelligiblewaytopresentsuchinformationonawebpage,soyoushouldusethemforthatpurpose.

slide5

weentheseopeningandclosingtags,youcanfindthefollowingelementsinthisveryinterestingand

prescribed(inotherwords,mandatory)order:

✓Zerooronecaptionelementstodefineacaptionforatable(ifthere’sonesuchelement,orno