HTML5-和-CSS3-设计模式高级教程-三-

**    

**A footer typically contains information about its section such as who wrote it.

**  <aside** id="sidebar"> **    

**An aside indicates content that is tangentially related to the content around it. Can be used as a sidebar.

结构意义

视觉结构

参见结构化含义设计模式中的例子。

CSS(用于结构意义设计模式)

`h1 { margin:0; font-size:1.9em; } h2 { margin:0; margin-top:3px; font-size:1.2em; }

header,nav,section,aside,footer,article{ display:block; } ul,div,td,th { border:1px solid black; background-color:gold; margin-top:20px; } div { padding:0 10px; } table { border-collapse:collapse; margin:5px 0; } td,th { background-color:white; width:20%; text-align:center; padding:2px; } ul { margin-left:0; padding:0 40px; } p,li { margin:0; padding:2px 0; }`

造型异常

当您设计项目类别时，样式表很好用，但是当您设计例外时，它很快就变得很麻烦。要设置一个元素的样式，通常需要向它添加一个 ID，并在样式表中设置 ID 的样式。这对于单个文档来说是一个小问题，但是随着时间的推移，随着文档的变化、样式的改变以及数百个文档共享相同的样式表，这个问题会变成一个维护问题。例如，由于用于特殊样式的 ID 是元素的一部分，因此当元素移动时，特殊样式也会随之移动。当您修改文档时，这可能会导致意想不到的结果，并且会让您徒劳地寻找问题的原因。

水平标尺、块间隔符或块空间移除器设计模式是设计异常情况的好解决方案，因为它们将元素插入到文档中。该元素具有结构化的含义，是自文档化的，并且易于重新定位。您可以使用标准类来设计这些间隔元素的样式，这样您就不再是设计异常了。间隔元件仅用于特殊情况。

位置造型

有时，您可能希望对某个元素进行样式化，因为它位于特定的位置。例如，您可能希望更改块的第一个子元素之前和最后一个子元素之后的边距量，因为折叠的边距对第一个和最后一个子元素的作用不同。如果将异常边距直接应用于第一个子元素，然后移动第一个子元素使其成为中间的子元素，其异常边距也会随之移动。这不是您想要的结果，因为您想要样式化位置——而不是元素。

设置位置样式的一种方法是使用水平标尺、块间隔符或块空间移除符设计模式。这是因为很容易将一个间隔元素保持在正确的位置——特别是如果你直观地命名它的类，比如"first-child"和"last-child"。CSS 3 位置选择器对于位置样式来说足够强大，并且几乎完全被现代浏览器支持。

视觉结构

节

HTML

`

Section

<section class="introduction”>    

Introduction

This paragraph is about the introduction.

Content

This paragraph is about the content.

**  

Subsection Example

• This list item relates to the subsection example.
        
• This list item relates to the subsection example.

CSS

section { padding:10px; margin:10px 0; background-color:gold;   border-left:1px solid gray; border-right:2px solid black;   border-top:1px solid gray; border-bottom:2px solid black; display:block; } section p { margin:0; margin-top:5px; } section h2 { margin:0; margin-bottom:10px; } section h3 { margin:0; margin-bottom:10px; } section.example { background-color:white; } section section { margin-bottom:0; }

节

列表

HTML

`

Lists

Normal Lists

• **List item with custom bullet
    
• **List item with circle bullet
    
• **List item with numbered bullet
    
• **List item with disc bullet displayed inside the margin
    
• ****-faux marker
    
• ****–&ndash;
    
• ****—&mdash;

Faux Lists

****1:8-5faux marker

****·&middot;

****•&bull;

****◊&loz;

****›&rsaquo;

****»&raquo;

CSS

`ul { margin-left:0; padding-left:0; } /* Normalized list */ ul li { margin-left:60px; }

.listed { margin-left:60px; display:list-item; list-style:square; }

.list { margin-left:60px; } .marker { float:left; margin-left:-60px; width:60px; text-align:center; }

.custom  { list-style-image:url("check.gif"); } .circle  { list-style-type:circle; } .decimal { list-style-type:decimal; } .inside  { list-style-position:inside; } .none    { list-style-type:none; }

/* Nonessential rules are not shown. */`

列表

背景项目符号

HTML

`

Background Bulleted

**   
• **Unordered list item with a background bullet

**   
1. **Ordered list item with a background bullet

**   

**Definition term with a background bullet

  

**Definition data with a background bullet

CSS

`.bb-list { padding-left:40px; margin-left:0; margin-top:20px; } .bb-list li, .bb-list dt, .bb-list dd, .bb-list p { padding-left:40px; margin-left:-40px; list-style-type:none;   margin-top:0; margin-bottom:0; }

.bb1 { background:url("check.gif") no-repeat 10px 1px; } .bb2 { background:url("star.gif") no-repeat 10px 1px; }`

背景项目符号

内联

HTML

`

Inlined

CSS

`div { padding:10px; margin-bottom:15px; border:2px solid black; } table, p, td, ul, li { margin-top:0px; margin-bottom:10px; padding-right:5px; } p, td, ul, li { background-color:gold; padding-top:5px; padding-bottom:5px;   border-left:1px solid gray; border-right:2px solid black;   border-top:1px solid gray; border-bottom:2px solid black; }

.inlined { display:inline; line-height:normal; padding:5px; margin:5px; vertical-align:bottom; } table.inlined{ display:inline-table; }`

内联

折叠页边距

HTML

`

Collapsed Margins

CSS

`div { margin:10px; padding-left:30px; background-color:gold;   background-image: url("ruler.gif"); background-repeat:repeat-y; } .border { border:2px solid black; }

.collapsed { margin-top:20px; margin-bottom:20px; }

.uncollapsed1 { margin-top:0; margin-bottom:0; **  padding-top:20px; padding-bottom:20px;** **  background-color:transparent; }**

.uncollapsed2 { margin-top:0; margin-bottom:0; **  border-top:20px solid transparent;** **  border-bottom:20px solid transparent; }**`

折叠页边距

磨合

HTML

`

Run-In

Normal Heading

**This is a paragraph following the heading. Notice     how the previous heading and this paragraph are separate blocks.

This is another paragraph following the first paragraph.

Run-In Heading

This is another paragraph following the first paragraph.

CSS

`section { padding:10px; margin-bottom:20px; background-color:gold;   border-left:1px solid gray; border-right:2px solid black;   border-top:1px solid gray; border-bottom:2px solid black; display: block; } .indent { margin-left:20px; border-left:4px solid black; padding-left:20px; }

.run-in { display:inline; } .run-in-container h2 { padding-right:20px; } .run-in-container p { font-style:italic; }`

磨合

横尺

HTML

`

Horizontal Rule

This paragraph is followed by a standard horizontal rule.

This paragraph is followed by an embedded and styled horizontal rule.

This paragraph is preceded by an embedded and styled horizontal rule.

CSS

`.hr { height:40px; width:200px;   margin:0 auto 0 auto;   border:0;   background:url("hr.gif") repeat-x left center;   line-height:1px; font-size:1px; }

.hr hr { display:none; }

/* Nonessential rules are not shown. */`

横尺

垫块垫片

HTML

`

Block Spacer

This paragraph is not followed by a block spacer.

This paragraph is followed by a block spacer.

This paragraph is preceded by the same block spacer.

This paragraph is not preceded by a block spacer.

CSS

`p { margin:0; padding:5px; background-color:gold;   border-left:1px solid gray; border-right:2px solid black;   border-top:1px solid gray; border-bottom:2px solid black; }

.spacer-large { padding-bottom:32px; }`

垫块垫片

块空间去除器

HTML

`

Block Space Remover

This paragraph has 32-pixel top and bottom margins,     but it is preceded and followed by a block space remover.

This paragraph has 32-pixel top and bottom margins,     but it is preceded and followed by a block space remover.

CSS

`section { border:2px solid black; margin-bottom:32px; display:block; } p { margin-top:32px; margin-bottom:32px; padding:5px; background-color:gold;   border-left:1px solid gray; border-right:2px solid black;   border-top:1px solid gray; border-bottom:2px solid black; }

.space-remover-large { margin-top:-32px; }`

块空间去除器

左旁注

HTML

`

Left Marginal

<span **class="marginal-header">**ProblemYou want to   excerpt an element and move it into the left margin.<span class="marginal-note">   You want to put images and notes in the margin. You want it to align   vertically with where it would have been placed in the flow.

****SolutionYou can   create a large left margin and use absolute positioning to move content   into it.

**Disadvantages   Nothing prevents marginal elements from vertically overlapping each other.   **OVERLAP!   However, you can prevent marginal elements from overlapping with content on   the right by creating a wide enough left margin.

  **AdvantagesYou can render inline markup like tables.

CSS

**.left-marginal { position:relative; width:480px;** **  margin-left:230px; margin-right:auto; }** .marginal-header { position:absolute; left:-220px; width:160px; font-weight:bold; } .marginal-note { position:absolute; left:-180px; width:150px;   font-style:italic; font-size:14px; font-weight:normal; } .marginal-alert { position:absolute; left:-180px; font-style:italic; } .marginal-flag { position:absolute; left:-40px; margin-top:-5px; }

左旁注

右旁注

HTML

`

Right Marginal

****ProblemYou want to   excerpt an element and move it to the right margin. **   You want to put images and notes in the margin. You want it to align   vertically with where it would have been placed in the normal flow.

****SolutionYou can   create a large right margin and use absolute positioning to move content   into it.

**Disadvantages   Nothing prevents marginal elements from vertically overlapping each other.   **OVERLAP!   However, you can prevent marginal elements from overlapping with content on   the left by creating a wide enough right margin.

  **AdvantagesYou can render inline markup like tables.

CSS

`body { width:702px; } .right-marginal { position:relative; width:480px; **  margin-right:210px; margin-left:auto; }**

.marginal-header {position:absolute; right:-230px; width:170px; font-weight:bold; } .marginal-note { position:absolute; right:-230px; width:150px;   font-style:italic; font-size:14px; font-weight:normal; } .marginal-alert {position:absolute; right:-230px; width:150px; font-style:italic; } .marginal-flag { position:absolute; right:-30px;  margin-top:-5px; }`

右旁注

十四、图象

本章展示了如何使用图像来创建美观实用的文档，以便快速访问和下载。

章节大纲

• 图片展示了如何使用<img>元素。它还对比了 GIF、JPG 和 PNG 图像格式的优缺点。
• Image Map 展示了如何用链接到其他页面的可点击区域覆盖图像。
• 淡出展示了如何使用渐变图像在内容后面添加微妙的阴影。它还展示了如何创建适应当前背景的变色龙渐变。
• 半透明展示了如何将一个部分透明的背景放在一个元素的后面，这样它就从它下面的背景中突出来，而不会模糊它。
• 替换文本展示了如何用图像替换文本，同时保持对非视觉用户的可访问性。当图像不可用时，这种技术也显示文本。
• 图像上的内容展示了如何在图像上叠加文本和其他图像。
• 背景图片上的内容展示了如何在背景图片上覆盖文本和其他图片。
• CSS Sprite 展示了如何将多个图像嵌入到一个文件中，并将它们独立显示为文档中不同元素的背景。
• 基本阴影图像展示了如何在不修改图像本身的情况下，创建并应用一个简单的阴影到图像上。
• 阴影图像展示了一种将阴影应用于任何尺寸图像的通用方法。
• 圆角展示了如何将一个元素的边框圆角化，以及如何创建可以想象的任何风格的自定义边框。
• 图片示例在一个文档中展示了这些模式。

图像

HTML

`<img width="742" height="556" src="cl1-99.jpg" alt="Crater Lake 1" />

`

CSS

`img { display:block; width:auto; height:auto; }

/* Nonessential rules are not shown. */`

举例

这个例子包含了我在 2003 年 8 月 4 日拍摄的火山口湖照片的八个不同版本。源图像为 742×556 像素，文件大小为 1，238，822 字节。我对图像进行了处理，创建了八个独立的文件——每个文件都有不同的图像类型和质量。

第一个图像是最高质量的 JPG 图像，它将文件大小减少到 275，798 字节。这减少了五倍。在 JPG 的最高质量，很难看到任何质量的损失。第二个图像是 90%质量的 JPG，这将文件大小减少到 81，248 字节。这减少了 15 倍。在 90%的质量下，用放大镜几乎看不出区别。您可以在第三个和第四个图像中看到差异，这两个图像是 75%和 50%质量的 jpg，分别为 41，290 和 14，841 字节。这分别减少了 30 倍和 84 倍。

第五张和第六张图是 gif。这些图像比 JPG 图像质量差，尺寸大。这不是对 gif 的公平测试，因为它们不是为包含成千上万种颜色的真实图像而设计的。gif 生成的文件较小，用于包含 256 色或更少颜色的计算机生成的图像时质量较好。

第七个和第八个图像是 png。这些图像的质量最好，文件大小略小于质量最好的 JPG，但无法通过增加压缩率来缩小文件大小。

图像

影像地图

HTML

`

Image Map

Northwest USA

<img src="nw.gif" usemap="#nw-map" alt="Northwest USA" width="290" height="200" />

**  <area** href="washington.html" alt="Washington" **    shape="poly"** coords="176,8, 164,89, 75,89, 40,72, 45,8" />

**  <area** href="oregon.html" alt="Oregon" **    shape="rect"** coords="9,90, 155,180" />

**  <area** href="idaho.html" alt="Idaho" **    shape="circle"** coords="212, 134,55" />  `

CSS

/* There are no CSS properties for styling image maps. */

影像地图

淡出

HTML

`

Fade-Out

**g1 Horizontal Fade-Out of GIF image to gold background color.

**g2 Horizontal Fade-Out of any background color to PNG image.

**g3 Vertical Fade-Out of GIF image to white background color.

**g4 Vertical Fade-Out of JPG image to white background color.

**g5 Vertical Fade-Out of any background color to PNG image.

**g6 Vertical Fade-Out of PNG image to any background color.

**g7 Vertical Fade-Out of PNG image to any background color from top and bottom.

CSS

`.g1 { background:url("h-white2gold.gif") repeat-y left top gold; } .g2 { background:url("h-trans2white**.png") repeat-y right** top royalblue; }

.g3 { background:url("v-gold2white**.gif") repeat-x** left top white; } .g4 { background:url("v-lightning**.jpg") repeat-x** left top white; } .g5 { background:url("v-trans2white**.png") repeat-x** left bottom red; } .g6 { background:url("v-white2trans**.png") repeat-x** left top green; } .g7 {background:url("v-white2trans**.png")** repeat-x left top, url("v-trans2white.png") repeat-x left bottom green; }

/* Nonessential rules are not shown. */`

淡出

半透明

HTML

`

Semi-transparent

  

  <span id="washington" **class="overlay">**Washington   <span id="oregon" **class="overlay">**Oregon   <span id="idaho" **class="overlay">**Idaho

  <p id="note1">     Semi-transparent backgrounds are gray in Internet Explorer 6, but they are     semi-transparent in Internet Explorer 7 and all other major browsers.

CSS

`.overlay { background:url("semi-transparent.png") repeat; }

#note1 { background:url("trans2white.png") bottom left repeat-x; }

/* Nonessential rules are not shown. */`

半透明

替换文字

HTML

`

Replaced Text

**Heading **2**

CSS

`#h2 { position:relative; width:250px; height:76px;   padding:0; overflow:hidden; }

#h2 span { position:absolute; width:250px; height:76px;   left:0; top:0; margin:0;   background:url("heading2.jpg") no-repeat; }`

替换文字

内容超过图像

HTML

`

Content over Image

**   

**Crater Lake North Rim

  

** August 4, 2003     

**  

CSS

`.figure { float:left; position:relative;   color:white; background-color:black; }

.figure .caption { position:absolute; margin:15px; left:0; top:0;   font-size:1.05em; }

.framed { display:block;   border-left:1px solid gray; border-right:2px solid black;   border-top:1px solid gray; border-bottom:2px solid black; }

#crater-date { position:absolute; left:0; bottom:10px; width:518px;   text-align:center; color:white; font-size:0.8em; }`

内容超过图像

背景图片上的内容

HTML

`

Content over Background Image

CSS

`#crater-lake { position:relative; padding:0; width:700px; height:500px; **  background:black url("crater-lake.jpg") no-repeat center center; }**

#crater-lake .caption { position:absolute; margin:15px; left:0; top:0;   font-size:1.05em; color:white; }

#crater-date { position:absolute; left:0; bottom:10px; width:700px;   text-align:center; color:white; font-size:0.8em; }

/* Nonessential rules are not shown. */`

背景图片上的内容

CSS 雪碧

HTML

`

CSS Sprite

  

  <a id="olympia" class="bang-bg" href="olympia.html" title="Olympia">     <span **class="screenreader-only">**Olympia

  <a id="salem" class="flag-bg" href="salem.html" title="Salem">     <span **class="screenreader-only">**Salem

  <a id="boise" class="star-bg" href="boise.html" title="Boise">     <span **class="screenreader-only">**Boise

CSS

`.bang-bg { background:url("bt.gif") -48px -16px; width:16px; height:16px; } .flag-bg { background:url("bt.gif") -64px -16px; width:16px; height:16px; } .star-bg { background:url("bt.gif") -64px -32px; width:16px; height:16px; }

.star-bg**:hover** { background-image:url("wt.gif"); background-color:black; } .flag-bg**:hover** { background-image:url("wt.gif"); background-color:black; } .bang-bg**:hover** { background-image:url("wt.gif"); background-color:black; }

.screenreader-only { position:absolute; left:-9999px; top:-9999px;   width:1px; height:1px; overflow:hidden; }

/* Nonessential rules are not shown. */`

CSS 雪碧

CSS 雪碧账户。

在bt.gif 中使用的 16×16 子画面的偏移

举例

我在例子中使用了两个 CSS sprite 文件:bt.gif(见图 14-1)和wt.gif。这些文件名代表透明背景上的黑色图像和透明背景上的白色图像。当用户将鼠标悬停在图像上时，悬停选择器会切换出bt.gif，并替换为wt.gif，将颜色从黑色转换为白色。背景也变为黑色，透过图像的透明部分显示出来。

我在示例目录中包含了示例中没有使用的另外两个 sprite 文件。它们被命名为tb.gif和tw.gif。这些文件名代表黑盒中的透明图像和白盒中的透明图像。这些嵌入的图像是黑色和白色的小盒子，中间是透明的图像，可以改变颜色以匹配背景。

我从一个名为 bitcons 的图标集中创建了这四个 CSS 精灵。我把所有嵌入的图像都做成了 16×16 像素，就像原始图像一样。这些图标是免费授权的，可在[somerandomdude.net/srd-projects/bitcons](http://somerandomdude.net/srd-projects/bitcons)获得。同样，您可以在项目中自由使用这四个 CSS sprite 文件。

当制作你自己的 CSS 精灵图片时，你可以在精灵中嵌入任何大小的图片。嵌入的图像不需要大小相同。你只需要知道每个嵌入图像的偏移量和大小。

CSS 雪碧账户。

基本阴影图像

HTML

`

Basic Shadowed Image

<img class="shadowed"   src="crater-lake.jpg"   alt="Crater Lake"   width="518"   height="389" />`

CSS

img.shadowed { padding-right:20px;   padding-bottom:20px;   background-image:url("shadow.jpg");   background-position:right bottom;   background-repeat:no-repeat; }

基本阴影图像

阴影图像

T2shadow.jpg

shadow-rt.jpg``shadow-lb.jpg是从shadow.jpg中提取出来的。

shadow-rt.jpg缩进并关闭阴影的右上边缘。

shadow-lb.jpg缩进并关闭阴影的左下边缘。

阴影图像

阴影图像 cont。

阴影图像的合成视图

阴影图像 cont。

阴影图像 cont。

HTML

`

Shadowed Image

  

    

      

        

CSS

`.shrinkwrapped { float:left; }

.shadowed { background-image:url("shadow.jpg");   background-position:right bottom; background-repeat:no-repeat; }

.shadowed-rt { background-image:url("shadow-rt.jpg");   background-position:right -80px; background-repeat:no-repeat; }

.shadowed-lb { padding-right:20px; padding-bottom:20px;   background-image:url("shadow-lb.jpg");   background-position:-80px bottom; background-repeat:no-repeat; }`

阴影图像 cont。

圆角

HTML

`<div class="bg"><div class="tl"><div class="br pad">   You can nest two divisions to create two opposite rounded corners.

CSS

`.bg { background:url("bg.gif") bottom left repeat-x white; margin-top:20px; }

.tl { background:url("rc.gif") top left no-repeat; } .br { background:url("rc.gif") bottom right no-repeat; } .tr { background:url("rc.gif") top right no-repeat; } .bl { background:url("rc.gif") bottom left no-repeat; }

.trc { background:url("rc-trc.gif") top right no-repeat; } .blc { background:url("rc-blc.gif") bottom left no-repeat; }

.pad { padding:10px; } .mbg{ background: url("rc-trc.gif") top right no-repeat, url("rc-blc.gif") bottom left no-repeat, url("rc.gif") top left no-repeat, url("rc.gif") bottom right no-repeat, url("bg.gif") bottom left repeat-x white; margin-top:20px; }`

圆角

圆角连续。

从圆角矩形图像创建圆角

创建三个圆角矩形图像

在示例中，我从一个 1600×1600 的透明画布开始。我添加了一个环绕画布边缘的圆角矩形。圆角矩形有一个透明的内部。我用外部背景色填充了每个圆角的外部像素，在我的例子中是白色。这使得它们不透明，所以每个角的外部用背景色覆盖内部背景。注意在图 14-7 中，如果第一个圆角矩形的左上角和第二个圆角矩形的右下角不是不透明的，它们将如何显示内部背景。最后，我将图像保存为rc.gif。

为了创建剪切图像，我剪切掉圆角矩形图像的左下角和右上角，并将它们保存为单独的 GIF 图像，命名为tr.gif和bl.gif。我确保角落的外部保持不透明，内部保持透明。否则，他们不会在外面隐藏外部方形边框，让背景在里面显示出来。我把每一个切口的尺寸都设计得足够大，可以用一个圆角盖住方形的角。

创建三个圆角矩形图像很简单:创建一个透明的圆角矩形；填充其圆角的外部；并将左下角和右上角保存为单独的图像。

圆角连续。

图像示例

HTML 的代表性摘录

`

Northwest USA

  

  Washington   Oregon   Idaho

       Olympia        Salem

  

    

      

Click a state to load information about that state.

      

Click a symbol to load information about that location.

      

图像示例

CSS 代表性摘录

`.shadowed { padding-right:12px; padding-bottom:12px;   background:url("shadow.jpg") right bottom no-repeat; }

.screenreader-only { position:absolute; left:-9999px; top:-9999px;   width:1px; height:1px; overflow:hidden; }

a { text-decoration:none; color:black; } a:hover { border-left:1px solid silver; border-right:1px solid gray; color:white;   border-top:1px solid silver; border-bottom:1px solid gray;   background-image:url("semi-transparent.png"); background-repeat:repeat-x; } .overlay { padding:2px 4px; }

.bg { background:url("white2trans.png") top left repeat-x yellow;   margin-top:20px; } .tl { background:url("rc.gif") top left no-repeat; } .br { background:url("rc.gif") bottom right no-repeat; } .trc { background:url("rc-trc.gif") top right no-repeat; } .blc { background:url("rc-blc.gif") bottom left no-repeat; } .pad { padding:10px; }

.bang-bg { background:url("bt.gif") -48px -16px; width:16px; height:16px; } .flag-bg { background:url("bt.gif") -64px -16px; width:16px; height:16px;  } .star-bg { background:url("bt.gif") -64px -32px; width:16px; height:16px; }

.bang-bg:hover { background-image:url("wt.gif"); background-color:black; } .star-bg:hover { background-image:url("wt.gif"); background-color:black; } .flag-bg:hover { background-image:url("wt.gif"); background-color:black; }

#states { position:relative; float:left; }   #washington { position:absolute; top:35px; left:80px; }   #oregon { position:absolute; top:135px; left:85px; }   #idaho { position:absolute; top:150px; left:210px; }`

十九、表格

表格是 HTML 中最有用和最复杂的结构之一。这是关于表格的两章中的第一章。本章探讨了表格的 HTML 结构以及如何设计它们的样式。下一章将探讨在表格中自动布置列的许多方法。表格的目的是识别表格数据并设置其样式。

章节大纲

• Table 展示了如何创建和样式化一个表格的基本结构。
• 行和列组展示了如何创建和样式化行标题、行页脚、行组、列组和列。
• 表格选择器展示了如何从列、行和行组中选择单元格。
• 分隔边框展示了如何分隔表格边框和单元格边框。
• 折叠边框展示了如何组合表格和单元格边框。
• 设计折叠边框展示了如何设计折叠边框。
• 隐藏和删除的单元格显示如何隐藏或删除单元格。
• 移除和隐藏行和列展示了如何移除或隐藏单元格的行、行组和列。
• 垂直对齐数据展示了如何将数据垂直对齐到单元格的顶部、中部、底部或基线。
• 条纹表展示了如何给行分配交替的背景。
• 可访问的表格展示了如何创建一个对盲人用户友好的表格。
• 展示了如何将任何元素变成表格、行或单元格。
• 表格布局展示了如何创建四种类型的表格:收缩、大小、拉伸和固定。

表

HTML

`

Table

Simple Table

Table with Spanned Rows and Cells

CSS

`table { width:auto; height:1px; table-layout:auto; border-collapse:collapse;   margin-left:20px; border:1px solid black; }

td, th { width:50px; height:1px; overflow:hidden; visibility:visible;   border:1px solid black; padding:5px; background:gold;   text-align:center; vertical-align:middle; text-indent:5px; }`

表

行列分组

HTML

`

Row and Column Groups

Row Groups

Columns

CSS

`table.example1 thead { background:orange; color:black; } table.example1 tbody { background:gold; color:black; } table.example1 tfoot { background:firebrick; color:white; } .col1 { background:wheat; } .col2 { background:gold; } .col3 { background:orange; } .col4 { background:tomato; } .col5 { background:firebrick; } .col6 { background:black; color:white; }

/* Nonessential styles are not shown */`

行和列组

表格选择器

HTML

`

Table Selectors