黑马程序员—HTML之表格

-------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ --------------------

看杨老师视频的时候也能看出来，在HTML中表格是一个很重要的技术，所以在这里专门的弄一篇关于表格的文章来供大家学习，希望对大家在学习HTML表格的时候有所帮助。表格用来显示“表列数据(tabular data)”，也就是那些逻辑上以行和列显示的信息。对于初学者来说，在HTML中创建表格似乎比较复杂，不过只要耐心细致地观察，你就会发现表格实际上与其它HTML元素相似，也具有严格的逻辑结构。

例1：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>

该例在浏览器中将会显示如下：

单元格1 单元格2
单元格3 单元格4

<tr>和<td>有什么区别？现在来逐一解释其中的各个标签的含义：

用于创建表格的3个基本元素是：

首标签<table>和尾标签</table>分别表示一个表格的开始与结束。这是不难理解的。
tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。
td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。这些都是容易理解的。
下面是对例1的详细解释。表格以<table>开始，其后的<tr>表明一个新行的开始，这一行中有两个单元格：<td>单元格1</td>和<td>单元格2</td>。该行以</tr>结束，然后紧接着以<tr>另起一行。该行也包含两个单元格，最后整个表格以</table>结束。

直观地讲：行是横向的单元格，列是从纵向的单元格：

单元格1 单元格2
单元格3 单元格4

在该表格中，单元格1和单元格2构成一行，单元格1和单元格3构成一列。

虽然上例中的表格只有两行和两列，但实际上，一个表格的行列数是没有限制的。

例2：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td>单元格5</td>
<td>单元格6</td>
<td>单元格7</td>
<td>单元格8</td>
</tr>
<tr>
<td>单元格9</td>
<td>单元格10</td>
<td>单元格11</td>
<td>单元格12</td>
</tr>
</table>

该例在浏览器中将显示如下：

单元格1 单元格2 单元格3 单元格4
单元格5 单元格6 单元格7 单元格8
单元格9 单元格10 单元格11 单元格12

表格当然也有属性。比如属性border用于指定表格四周边框的厚度：

例3：
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>

该例将会在浏览器中将显示如下：

单元格1 单元格2
单元格3 单元格4

表格边框的厚度是以象素（pixels）为单位来指定的。

与设定图像的显示宽度类似，象素和屏幕百分比也可以用于设定表格宽度：

例4：
<table border="1" width="30%">
该例将在浏览器中显示一个表格，其宽度是屏幕宽度的30％，可以自己试一下。表格还有很多属性，比如下面的这两个：

align：指定整个表格、某行或某个单元格里内容的水平对齐方式，比如左对齐、居中或右对齐。
valign：指定某个单元格里内容的垂直对齐方式，比如靠上、置中或靠下。
例5：
<td align="right" valign="top">单元格1</td>

可以往表格中插入什么？
理论上，你可以往表格中插入任何东西，诸如文本（text）、链接(links)和图像(images)等等。但是，表格是用来显示表列数据的 （也就是那些以行和列显示来体现意义的数据），因此，不要仅仅因为你想把某些内容放在一起而使用表格。

在因特网的初期（也就是几年以前），表格经常被用作网页布局的工具。但是，如果你要控制文本和图像的显示，还有更酷的方式（提示：即CSS），有关内容将在后面作详细介绍。表格的学习同样是需要动手的，试试看设计几个具有不同尺寸、属性和内容的表格。就会发现已经学会了好多东西。 当你精通表格后，就再也没有其他有关HTML的内容能难住你了。所以来学习下表格的其它相关属性？
colspan和rowspan这两个属性用于创建特殊的表格。

colspan是“column span（跨列）”的缩写。colspan属性用在<td>标签中，用来指定单元格横向跨越的列数：

例1：

<table border="1">
<tr>
<td colspan="3">单元格1</td>
</tr>
<tr>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>

该例在浏览器中将显示如下：

单元格1
单元格2 单元格3 单元格4

该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“2”，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。

例2：

<table border="1">
<tr>
<td colspan="2">单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
</table>

该例在浏览器中将显示如下：

单元格1 单元格2
单元格3 单元格4 单元格5

rowspan的作用是指定单元格纵向跨越的行数。

例3：
<table border="1">
<tr>
<td rowspan="3">单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
</tr>
</table>

该例在浏览器中将显示如下：

单元格1 单元格2
单元格3
单元格4

上例中的单元格1，其rowspan被设为“3”，这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。多试着用colspan和rowspan来创建几个表格。那么就会对表格的应用掌握更多。希望我们加油早日进入黑马。

-------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ --------------------