HTML&CSS基础篇之十五：表格&列表

代码

<table summary="This table holds data about the
           cities I visited on my travels. I've included the date
           I was in each city, the temperature when I was there,
           and altitude and population of each city. I've also
           included a rating of the diners where I had lunch, on a
           scale from 1 to 5.">
        <caption>
            The cities I visited on my
            Segway'n USA travels
        </caption>
        <tr>
            <th>City</th>
            <th>Date</th>
            <th>Temperature</th>
            <th>Altitude</th>
            <th>Population</th>
            <th>Diner Rating</th>
        </tr>
        <tr>
            <td>Walla Walla, WA</td>
            <td>June 15th</td>
            <td>75</td>
            <td>1,203 ft</td>
            <td>29,686</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>Magic City, ID</td>
            <td>June 25th</td>
            <td>74</td>
            <td>5312 ft</td>
            <td>50</td>
            <td>3/5</td>
        </tr>
        <tr>
            <td>Bountiful, UT</td>
            <td>July 10th</td>
            <td>91</td>
            <td>4,226 ft</td>
            <td>41,173</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>Last Chance, CO</td>
            <td>July 23rd</td>
            <td>102</td>
            <td>4,780 ft</td>
            <td>265</td>
            <td>3/5</td>
        </tr>
        <tr>
            <td>Truth or Consequences, NM</td>
            <td>August 9th</td>
            <td>93</td>
            <td>4,242 ft</td>
            <td>7,289</td>
            <td>5/5</td>
        </tr>
        <tr>
            <td>Why, AZ</td>
            <td>August 18th</td>
            <td>104</td>
            <td>860 ft</td>
            <td>480</td>
            <td>3/5</td>
        </tr>
    </table>

用XHTML 创建表格

可能用CSS和Div来创建表格，不过XHTML中的<table>元素能够满足制作表格的所有需求。

第一行包含的表头
列
行

<table>
        <tr>
            <th>City</th>
            <th>Date</th>
            <th>Temperature</th>
            <th>Altitude</th>
            <th>Population</th>
            <th>Diner Rating</th>
        </tr>
        <tr>
            <td>Walla Walla, WA</td>
            <td>June 15th</td>
            <td>75</td>
            <td>1,203 ft</td>
            <td>29,686</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>Magic City, ID</td>
            <td>June 25th</td>
            <td>74</td>
            <td>5312 ft</td>
            <td>50</td>
            <td>3/5</td>
        </tr>
        <tr>
            <td>Bountiful, UT</td>
            <td>July 10th</td>
            <td>91</td>
            <td>4,226 ft</td>
            <td>41,173</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>Last Chance, CO</td>
            <td>July 23rd</td>
            <td>102</td>
            <td>4,780 ft</td>
            <td>265</td>
            <td>3/5</td>
        </tr>
        <tr>
            <td>Truth or Consequences, NM</td>
            <td>August 9th</td>
            <td>93</td>
            <td>4,242 ft</td>
            <td>7,289</td>
            <td>5/5</td>
        </tr>
        <tr>
            <td>Why, AZ</td>
            <td>August 18th</td>
            <td>104</td>
            <td>860 ft</td>
            <td>480</td>
            <td>3/5</td>
        </tr>
    </table>

用一个<table>标记，开始一个表格。
这个第一行，以一个标记开始。
每个<th>元素构成一列的表格表头。
注意：表格表头是逐个罗列的，看上去这些元素构成了一行，实际上我们是定义了整个表头行。
每个<tr>元素构成一个表格行。
每个<td>元素占据表格的一个单元，每个单元都是单独的一列。
所有的<td>标记组成一行。

---

表格剖析

创建单一表格的四个元素：
table
tr
th
td

table标记是整个表格的开始标记。如果你想创建一个表格，那么已它开始。

th 元素包含一个单位格，它必须位于表格行中。

每个tr元素定义一个表格行，所有的表格数据都是嵌入在每一个tr元素中的。

td元素包含一个表格中的数据单元，它必须放在一个表格行。

即使数据单元格是空的，还是要罗列出所有的数据项。

要实现表头在表格的左边而不是在上边，只需将表头元素分别放入每行即可。

在CSS出现之前，使用表格来完成版面设计是非常普遍。但这种做法已经过时。

表格不是外观，用表格指定表格式数据之间的关系才是重点。

表格提供了一种在HTML中定义表格式数据的方法。

表格由行中的数据单元组成。

行中隐式地定义了列。

表格中列的个数，取决于一行中数据单元格的个数。

总的来说，表格的作用不在于外观，外观是CSS的工作。

---

添加标题和摘要

<table summary="This table holds data about the
           cities I visited on my travels. I've included the date
           I was in each city, the temperature when I was there,
           and altitude and population of each city. I've also
           included a rating of the diners where I had lunch, on a
           scale from 1 to 5.">
        <caption>
            The cities I visited on my
            Segway'n USA travels
        </caption>
</table>

摘要不会在网页中显示出来，它的作用纯粹只是增加表格的可读性，起小块文本的作用，还能使屏幕读取器能够更好的读取用户所表述的表格。

标题，就是浏览器中的标题。默认状态下，多数浏览器起将标题设置在表格上方。可以通过CSS重新地位标题的格式与位置。

table {
    margin-left: 20px;
    margin-right: 20px;
    border: thin solid black;
    caption-side: bottom;
}

td, th {
    border: thin dotted gray;
    padding: 5px;
}

caption {
    font-style: italic;
    padding-top: 8px;
}

样式话表格。分别在表格的左、右两边添加边界及细的黑色边框。
将标题移到表格下方。

改变数据单元格的边框，设置成较淡的点状的灰色边框。
在单元格中添加一些补白，使得单元格内容与边框之间留一些空隙。

格式化标题，将标题字体属性font-style改为斜体，并在顶部添加补白。

---

边框间距

表格单元的确包含了补白和一个边框—正如你在盒模式中看到的—不过表格和和格式在边界属性上有所不同。

我们把单元格之间的空间称为边框间距。我们使用边框间距属性来代替边界，边框间距属性定义在整个表格中。换言之，我们不能对单个的表格单元而只能对所有的单元格设置边界属性。

表格单元不存在边界，它只有边框四周的空间而已，而这个空间事为整个表格设置的。你不能单独控制单个表格单元的边框间距。

设置边框间距
可以设置不同的水平和垂直方向上的的边界间距。

border-spacing:10px 30px;

设置了10个像素的水平边框间距和30个像素的垂直边框间距。

---

压缩边框

table {
    margin-left: 20px;
    margin-right: 20px;
    border: thin solid black;
    caption-side: bottom;
    border-collapse: collapse;
}

border-collapse属性来消除边框间距。使用这个属性时，浏览器将忽略设置在表格上的所有边框间距，并且将两个相邻的边框合并为一个边框 。这样就将两个边框“压缩”为一个边框了。

---

表格颜色

表头颜色

th {
    background-color:#cc6600;
}

表格行颜色
.cellcolor {
background-color:#fcba7a;
}

---

单元格跨行或跨列

将单元格扩展为多行
使用rowspan属性定义一个表格单元所占据的行数。然后将相同的表格数据元素从其他扩展行中消除。

<tr>
    <td rowspan="2">Truth or Consequences, NM</td>
    <td class="center">August 9th</td>
    <td class="center">93</td>
    <td rowspan="2" class="right">4,242 ft</td>
    <td rowspan="2" class="right">7,289</td>
    <td class="center">5/5</td>
</tr>
<tr>

    <td class="center">August 27th</td>
    <td class="center">98</td>


    <td class="center">4/5</td>
</tr>

表格数据单元格扩展为多列
在td元素中添加colspan属性并设置列的数值。
不同与rowspan属性，colspan属性在扩展多列时，你需要消除表格单员中那些相同的行元素（因为扩展的是多列而不是多行）

QA

可否在td元素中添加colspan和rowspan两个属性？
可以，只需保证调整表格中的其他td元素来说明扩展的行和列就可了。换句话说就是，你需要从同一行和同一列中消除那些相同的td元素。

---

表格嵌套表格

<tr>
            <td rowspan="2">Truth or Consequences, NM</td>
            <td class="center-aligned">August 9th</td>
            <td class="center-aligned">93</td>
            <td rowspan="2" class="right-aligned">4,242 ft</td>
            <td rowspan="2" class="right-aligned">7,289</td>
            <td class="center-aligned">5/5</td>
        </tr>
        <tr>
           <td class="center-aligned">August 27th</td>
           <td class="center-aligned">98</td>
           <td class="center-aligned">
             <table>
               <tr class="bluecellcolor">
                <th>Tess</th>
                <td>5/5</td>
               </tr>
               <tr class="pinkcellcolor">
                <th>Tony</th>
                <td>4/5</td>
               </tr>
             </table>
           </td>
        </tr>

为嵌套的表格表头覆盖CSS

table table th {
    background-color:white;
}

这个表格包含了两个就餐率，一个Tess的，一个是Tony的，我们用这些名字来命名表格的表头，数据单元为就餐率。

---

列表样式

list-style-type

li {
    list-style-type: disc;
}

li {
    list-style-type: circle;
}

li {
    list-style-type: square;
}

li {
    list-style-type: none;
}

在li元素中设置样式，也可以在ul元素中设置，元素li将继承ul属性
disc 圆点形状
circle 圆圈形状
square 方块标志
none 消除所有标志

给列表自定义一个标志

li {
    list-style-image: url(images/backpack.gif);
    padding-top:5px;
    margin-left: 20px;
}

自定义图片
添加一些边界属性，用来增加一些空间，同时增加一些顶部补白属性，用来设置列表选项的头部空间。

QA

什么是顺序列表 改变它的样式？
可以用同样的办法样式化顺序列表和非顺序列表。
顺序列表有一组标志，这一组标志由数字或字母排列而成，用CSS的list-style-type属性你可以控制顺序列表，不管它是十进制数字，罗马数字还是字母表字母，通常list-style-type属性值的取值为十进制、大写字母、小写字母、大写罗马数字或者小写罗马数字。

如何控制列表的文本环绕？也就是说，如何控制让文本环绕在标记的下面？还是标记环绕在文本呢的下面？
通过list-style-position的属性可以处理这个问题。
将此属性值设置为inside，那么文本就环绕在标记的下面；设置为outside，那么标记就环绕在文本的下面。
inside 标记位于列表选项中，所以文本环绕在标记的下面。
outside 标记位于列表选项的外面，所以标记环绕在文本下面。

---

要点

• XHTML表格可以结构化表格式数据。

• 使用HTML的表格元素，table,tr, th,td等标记创建表格。

• table标记的定义作用于整个表格。

• 表格是由行定义的，使用的是tr元素。

• 每行中，使用td元素定义一个或多个单元格。

• 使用th标记定义一个数据单元格的行表头或列表头。

• 表格以格子的方式罗列出来，每一行对应HTML中的一个tr标记对，每一列对应行中td标记对之间的内容。

• 使用表格summary属性和capition元素，你可以提供一些表格的附加信息。

• 表格单元格包含补白、边框、边界等属性一样，你也可以用CSS控制表格的补白、边框、边框间距等属性。

• border-collapse属性是一个针对表格的特殊的CSS属性，它允许你将多个单元格合并为一个更清晰的单元格。

• 使用CSS中的text-align和verticalalign属性可以改变表格数据的对齐方式。

• 你可以使用background-color属性为你的表格添加一些颜色。背景也暗示的设置可以是整个表格、一行或者单个单元格。

• 如果一个数据单元格为空，那么td元素中不放置任何内容。不管怎样，你都需要使用一个td标记对维持表格的对齐方式。

• 如果你的单元格需要被扩展为多行或者多列，你可以使用td元素的rowspan或者colspan属性。

• 在表格中嵌入一个表格，只需将表格及其所有的内容放进被嵌套表格的一个单元格中就可以了。

• 表格可以用来记录表格式的数据，而不是用来做网页的版面设计。

• 列表可以像其他元素那样被CSS样式化。CSS中很多针对列表的属性，如list-style-type和list-style-image。

• list-style-type改变列表中标志的类型。

• list-style-image定义图像列表标记。

整理自Head First HTML