第四单元 HTML 表格

现在我们熟悉了HTML的基本的Tag,也知道HTML的tag里面可以有属性,从而让HTML功能更强大。style 是HTML里面一个很常用的属性,几乎可以用在所有的HTML Tag里。特别是用在<DIV>, <SPAN>tag.

在这一单元里,我们学习如何用HTML代码来表示出表格。这组HTML代码可以说是HTML中比较复杂的Tag,学好了它们,其他的HTML Tag看起来就容易很多。这组tag分别是<table>,<tr>,<td>.

所谓表格,就是由行与列组成,在网页中,表格可以显示为:

第一行,第一列 第一行,第二列 第一行,第三列
第二行,第一列 第二行,第二列 第二行,第三列

上面的是一个2行3列的表格,如果用HTML来表示就是(请注意下面的代码有8行,并且有些行缩进,目的是为了让网友更容易的理解代码。因为我们知道HTML换行必须用<BR>,所以这些代码如果放在一行,效果相同。):

<table border=1 cellpadding=15px>
<tr>
    <td>第一行,第一列</td><td>第一行,第二列</td><td>第一行,第三列</td>
</tr>
<tr>
    <td>第二行,第一列</td><td>第二行,第二列</td><td>第二行,第三列</td>
</tr>
</table>

分析上面的HTML代码,我们看出:

1。表格开始用<table>开始,用</table>首尾
2。<tr>,用在<table>里面,表示每一行的开始,</tr>表示这一行的结尾
3。<td>和</td>用在<tr>里面,表示这一行的一列。

在<table>这个Tag里面,border属性修饰表格边框的宽度,cellpadding属性修饰表格文字与边框的距离。
大家可以自己修改上面的代码,改变border或者cellpadding的数值,看看效果(比如说把border修改成0,或者4,看看效果有什么不同)。

<td> Tag里面的两个重要属性:align 和 valign:
这两个属性一般用于<td> Tag里面,用来说明表格里面的文字所在的位置。
align 的值可以为:left, right, center(表示位置的水平方向:左边,右边,中间。)
valign 的值可以为:top, bottom, center(表示位置的垂直方向:上,下,中间)

如果<td> Tag里面没有明确说明align,那么默认的水平位置为左边(left);如果没有说明valign,那么默认的垂直位置为中间(center)

修改一下上面的HTML(添加一些align和valign属性):

<TABLE cellPadding=15 border=1 style="width:600px;height:400px">
<TR>
<TD align=right>第一行,第一列</TD>
<TD vAlign=top align=right>第一行,第二列</TD>
<TD>第一行,第三列</TD></TR>
<TR>
<TD>第二行,第一列</TD>
<TD vAlign=bottom align=left>第二行,第二列</TD>
<TD>第二行,第三列</TD></TR></TABLE> 

 结果如下:

第一行,第一列 第一行,第二列 第一行,第三列
第二行,第一列 第二行,第二列 第二行,第三列

第一行第一列:align=right,文字的水平方向在最右边。没有valign,使用默认值(也就是中间)
第一行第二列: valign=top,align=right,文字的垂直方向在顶部,水平方向在右边
第一行第三列:没有说明align,valign,使用默认值。垂直方向在中间,水平方向在左边
第二行第一列:没有说明align,valign,使用默认值。垂直方向在中间,水平方向在左边
第二行第二列:vAlign=bottom,align=left,文字的垂直方向在底部,水平方向在左边
第二行第三列:没有说明align,valign,使用默认值。垂直方向在中间,水平方向在左边

大家可以修改上面的代码,更换各种属性的值,自己测试,很容易发现规律。

 

一些特殊形式的表格:
看看下面的表格。这个表格比较特别,第一行第一列其实占用了2行的位置:

第一行,第一列 第一行,第二列 第一行,第三列
第二行,第二列 第二行,第三列
第三行,第一列 第三行,第二列 第三行,第三列

代码如下:

<table border=1 cellpadding=15px>
<tr>
<td rowspan=2>第一行,第一列</td><td>第一行,第二列</td><td>第一行,第三列</td>
</tr>
<tr>
<td>第二行,第二列</td><td>第二行,第三列</td>
</tr>
<tr>
<td>第三行,第一列</td><td>第三行,第二列</td><td>第三行,第三列</td>
</tr>
</table>

1。在第一行第一列的<td> Tag里面要加上rowspan=2,意思是,我需要占用2行。
2。既然第一行第一列占用了两行的位置,那么第二行第一列的位置就没有了,所以第二行只有2个<td>

 

以此类推,再看看下面的代码:

<table border=1 cellpadding=15px>
<tr>
<td colspan=2>第一行,第一列</td><td>第一行,第三列</td>
</tr>
<tr>
<td>第二行,第一列</td><td>第二行,第二列</td><td>第二行,第三列</td>
</tr>
<tr>
<td>第三行,第一列</td><td>第三行,第二列</td><td>第三行,第三列</td>
</tr>
</table>

1。colspan=2 意思是,我(第一行,第一列)需要占用两列
2。那么很显然,第一行,第二列就不能存在了,所以第一行只有两个<td>

显示的结果如下:

第一行,第一列 第一行,第三列
第二行,第一列 第二行,第二列 第二行,第三列
第三行,第一列 第三行,第二列 第三行,第三列

注意事项:一般来说

1。<table> tag 里面只能是 <tr> tag,不允许使用其他tag (其实,可以有<tbody>和<th>tag。初学者可以不必理会)。
2。<tr> tag 里面只能有 <td> Tag,不可以用别的 tag
3。<td> tag 里面可以使用其他任何tag,甚至可以有<table> 等tag(也就是表格里面可以套表格)

<table>,<tr>,<td> 不仅仅可以用来制作表格,还有一个很重要的用途:网页设计。一个网页可以分成几块,这几大块的排版设计可以通过使用table 来实现。例如上例中,我们把<table> 里面 border=1这个属性改成border=0,那么显示的结果如下:

第一行,第一列 第一行,第三列
第二行,第一列 第二行,第二列 第二行,第三列
第三行,第一列 第三行,第二列 第三行,第三列

许多网页的设计就是通过这种没有边框的表格来给每个区域的文章图片等排版的。下面给出一个简单的例子:

  对于被无意间发现不懂字,李连杰没有半点羞愧,更坦白承认自己是文盲,他说:“小时候我每天练功八小时,就是不让我们去念书,只是不断练功。”原来平时拍戏的剧本,李连杰全是由助手朗读出来,然后用脑牢牢记住,相对于其他艺人来说,李连杰要付出更多的时间。得悉李连杰对阅读中文有困难,华仔立刻表示要义务充当老师,每日抽出四十五分钟教他中文,现在李连杰已进步不少,而身为老师的华仔也不禁大赞他的悟性很高。

  虽然中文成为某部分的障碍,但李连杰成就绝不比有学历的人逊色,凭其从小锻炼一身好武功,已成功于好莱坞打响名堂,片酬更不断升至1500万美金,与同样学识不多的成龙一起,成为亚洲艺人片酬榜之首。相反近年于好莱坞也比较吃得开的周润发,片酬方面却与李连杰、成龙差很远,陈可辛称:“发哥现在的片酬是500万美金,之前《赤壁》剧组都是这样公布的,其实文盲真的并不是很重要,你看李连杰多努力练功夫,而成就最大的却是他!”
  审计前,发改委开展了自查,并纠正了自查发现的问题;审计发现的主要问题是,通过举办大型会议、展览会等向企业收取赞助费1340万元,所属单位违规占用和挪用国家建设资金4938万元、少交纳土地出让金 3688.19万元等。发改委的自查,相类于西门子的内审。西门子是一家世界知名企业,近来陷入“贿赂门”。其德国母公司涉嫌商业行贿,被德国检方调查。自从德国方面展开调查开始后,西门子加强了内部审计,至今西门子中国公司已做了60个内审,最终查出了20人犯的错误“不能容忍”,西门子终止了和他们的劳动合同。也就是说,人家的审计,关键是落实到“人”身上,让那些“不能容忍”的员工“拜拜”走人了。

  政府职能部门当然与企业不同,但人家的内部审计若对我们有所启示,也应该汲取。看我们的审计结果公告,大致上见钱见物不见人,跳入公众眼眶的是一串串数字。官员也好,普通公务员也罢,其实都是“政府雇员”,你不能看管好顶顶重要的财政预算的钞票,而且数额巨大,让你“走人”应该是再正常不过的事了。所以关键是,审计结果要落实到“人” 的身上。然而我们的自查,却不见与“人”有什么干系。

上面的例子实际上是一个一行两列的表格,这个表格的边框为0(border=0)。HTML源代码如下(为了醒目,便于网友自己分析,HTML代码用了不同的底色):

<table border=0 cellpadding=15>
<tr>
<td valign=top style="font-size:12px;line-height:20px;width:280px">
  对于被无意间发现不懂字,李连杰没有半点羞愧,更坦白承认自己是文盲,他说:“小时候我每天练功八小时,就是不让我们去念书,只是不断练功。”原来平时拍戏的剧本,李连杰全是由助手朗读出来,然后用脑牢牢记住,相对于其他艺人来说,李连杰要付出更多的时间。得悉李连杰对阅读中文有困难,华仔立刻表示要义务充当老师,每日抽出四十五分钟教他中文,现在李连杰已进步不少,而身为老师的华仔也不禁大赞他的悟性很高。
<BR><BR>
  虽然中文成为某部分的障碍,但李连杰成就绝不比有学历的人逊色,凭其从小锻炼一身好武功,已成功于好莱坞打响名堂,片酬更不断升至1500万美金,与同样学识不多的成龙一起,成为亚洲艺人片酬榜之首。相反近年于好莱坞也比较吃得开的周润发,片酬方面却与李连杰、成龙差很远,陈可辛称:“发哥现在的片酬是500万美金,之前《赤壁》剧组都是这样公布的,其实文盲真的并不是很重要,你看李连杰多努力练功夫,而成就最大的却是他!”
</td>
<td style="font-size:12px;line-height:20px;width:280px" valign=top>
  审计前,发改委开展了自查,并纠正了自查发现的问题;审计发现的主要问题是,通过举办大型会议、展览会等向企业收取赞助费1340万元,所属单位违规占用和挪用国家建设资金4938万元、少交纳土地出让金 3688.19万元等。发改委的自查,相类于西门子的内审。西门子是一家世界知名企业,近来陷入“贿赂门”。其德国母公司涉嫌商业行贿,被德国检方调查。自从德国方面展开调查开始后,西门子加强了内部审计,至今西门子中国公司已做了60个内审,最终查出了20人犯的错误“不能容忍”,西门子终止了和他们的劳动合同。也就是说,人家的审计,关键是落实到“人”身上,让那些“不能容忍”的员工“拜拜”走人了。
<BR><BR>
  政府职能部门当然与企业不同,但人家的内部审计若对我们有所启示,也应该汲取。看我们的审计结果公告,大致上见钱见物不见人,跳入公众眼眶的是一串串数字。官员也好,普通公务员也罢,其实都是“政府雇员”,你不能看管好顶顶重要的财政预算的钞票,而且数额巨大,让你“走人”应该是再正常不过的事了。所以关键是,审计结果要落实到“人” 的身上。然而我们的自查,却不见与“人”有什么干系。
</td>
</tr>
</table>

上面style的属性中font-size用来表示被修饰区域文字的大小。

 

总结:

本单元学习了表格的制作。表格使用的tag 包括<table>,<tr>,<td>及其常用属性。<table>表示这是一个表格;<tr>表示表格的一行;<td>表示表格的一列。这三个tag不仅仅可以用来定义表格,还可以用来给一个网页进行排版。

<table>的属性:
border:表示表格的边框
cellpadding:表格中文字与边框的距离

<td> tag 的属性:
align:表格中文字的水平位置
valign:垂直位置
colspan:表格中这一栏目占用的列数(默认的列数为1)
rowspan:表格中这一栏目占用的行数(默认为1)
style:用于修饰表格项目的属性

 
下一单元:HTML 中的特殊字符
 
 
顶顶华闻 版权所有 Copyright © 转载条款