Microsoft Word - 第8章表格11ok.doc

Size: px

Start display at page:

Download "Microsoft Word - 第8章表格11ok.doc"

传就郭
6 years ago
Views:

1 98 第 8 章表格表格的用途很广, 可以用来显示表格型数据图片等, 也可以用来布局在前面的布局中常用表格, 现在的网页更往 W3C 标准方向发展, 用 DIV+CSS 布局可取代表格但表格不仅仅可以用来布局, 还有其他功能, 所以学习表格是很重要, 虽然不常用于表格布局, 但表格的其他用法不能用 DIV+CSS 取代学完本章后, 读者会掌握 : 标记 table 及 tr td 用法跨多行多列的表格表格内文字对齐表格在网页中对齐表格间隔 8.1 表格基本语法表格在网页中可以表现出 Word 中的表格效果, 即在 Word 中要表现的表格效果可以在网页中显示, 就需要 HTML 中的表格标记表格标记不仅仅用于表现表格中的效果, 还可以用表格来给网页布局, 布局中的表格是不需要表格中的边框的, 故需要对表格进行设置表格是 HTML 常用的标签, 代表在网页中插入一张表格表格是用 table 标签对表示的标签对, 其他语法形式如下 : <! 设置表格标记 --> <table> 这只是表示一张表格而已, 但表格常常是有行和列的, 那么, 如何在表格内表示行和列呢? 这又要另外二个代码, 标签对表示表行, 每出现一个代表表格的一行 ; <th> 标签对表示表头, 表头是在表格上显示下面列的 ;<td> 标签对表示表元, 表元就是在表格中显示的每一方格代码 8.1 说明表格的基本语法 <title> 表格的基本语法 </title> <body> <! 设置表格和边框 --> 代码 8.1 源代码 \ 第 8 章 \ 表格的基本语法.html <table border= 1 > <! 设置表格中的表头 -->

99 <! 设置表格中的表项 --> <th> 表头一 </th> <th> 表头二 </th> <td> 表元二 </td> <td> 表元二 </td> 上面代码在 <table> 标签对中包括两个行表示符 : 标签对, 表示两行在第一个行表示符中包括了表头符, 在第二个行表示符中包括了表元表示符, 为了显示出效果, 在表格属性中加入了 border 边框, 这稍后会讲解, 效果如图 8.

2 99 <! 设置表格中的表项 --> <th> 表头一 </th> <th> 表头二 </th> <td> 表元二 </td> <td> 表元二 </td> 上面代码在 <table> 标签对中包括两个行表示符 : 标签对, 表示两行在第一个行表示符中包括了表头符, 在第二个行表示符中包括了表元表示符, 为了显示出效果, 在表格属性中加入了 border 边框, 这稍后会讲解, 效果如图 8.1 所示图 8.1 表格基本语法注意 : 在 <table> 中的 <th> <td> 是常用的,<th> 可以省略, 三者都在 <table> 中, 不能交叉 8.2 跨多行多列表元当表格中的单元格有相同的或者需要设置相同的内容时, 需要设置单元格合并, 合并可以为不同行的单元格, 也可以为不同列的单元格, 在网页中可以来设置不同的单元格合并, 所表现的效果与 Word 中的表格一样在表格中有时会合并单元格, 所以对表格要进行跨行或跨列处理, 使多个表元合成一个单元格跨表元分跨多行和跨多列, 包括跨表头 th 和表元 td, 跨行用 rowspan 表示, 同理, 跨列用 colspan 表示, 下面分别对它们作详细介绍跨多行表元跨多行表元应用在合并多行单元格时, 跨多行表元语法在 th 和 td 上加 rowspan 表示, rowspan 后面的值是数字, 数字表示跨多少行表元, 如跨 3 行表元表示如下 : <! 设置表格中的跨多行 -->

$设置表格 --> <table border="1" width="300"> <! 设置表格的行 --> 代码 8.2 源代码 \ 第 8 章 \ 跨多行表元.html <! 设置表格中的表项和跨多行 --> <td rowspan=3>1</td><td>2</td><td>3</td><td>4</td> <!$

3 100 <th rowspan=3></th> 或者如下表示 : <! 设置表格中 td 的跨多行 --> <td rowspan=3></td> 这就表示跨越三行显示, 为了表达出效果是跨行的, 从多行多列表格中实践跨多行表元用法代码 8.2 表示的是跨多行表元用法 <title> 跨多行表元 </title> <body > <! 设置表格 --> <table border="1" width="300"> <! 设置表格的行 --> 代码 8.2 源代码 \ 第 8 章 \ 跨多行表元.html <! 设置表格中的表项和跨多行 --> <td rowspan=3>1</td><td>2</td><td>3</td><td>4</td> <! 以下都是设置表格行和表项 --> <td>2</td><td>3</td><td>4</td> <td>2</td><td>3</td><td>4</td> 代码 8.2 表示在一个表格中, 有四行四列的单元格, 在第一列中, 设置 rowspan 为 3, 表示在本列跨 3 行, 其他的表元往后推, 效果如图 8.2 所示图 8.2 跨多行表元

4 101 注意 : 当出现 rowspan 时, 所包含的列数并不需要与 rowspan 所在列数一致, 如果一致, 会导致列往右移跨多列表元与跨多行一样, 跨多列也放在 td 和 th 中, 表示在一行中跨多列表元语法用 colspan 表示, 完整语法如下 : <! 设置表格中跨多列 --> <th colspan=3></h> 或 <td colspan=3></td> 表示跨多列, 相应的有多少列占用多少个单元格, 代码 8.3 表示跨多列表元 <title> 跨多列表元 </title> <body > <! 设置表格 --> <table border="1" width="300"> <! 设置表格跨多列 --> 代码 8.3 源代码 \ 第 8 章 \ 跨多列表元.html <! 设置表格中表项 --> <td colspan=3>1</td><td>2</td> 代码 8.3 表示在表格中的第一行用跨多列表示,colspan 的值为 3, 所以跨 3 列效果如图 8.3 所示

5 102 图 8.3 跨多列表元注意 :colspan 与 rowspan 要分清楚, 表示跨多行和跨多列在表格中的单元格布局不一样 8.3 设置表格大小表格可以设置宽度和高度, 因为默认的是没边框的 ( 边框为 0), 边框也可以设置宽度, 本节首先介绍边框属性, 然后又介绍了表格的高度和宽度设置表格边框边框是用 border 表示嵌入在 table 标记里面的属性, 表示表格边框的宽度, 在学习表格大小前还对表格的边框研究, 表格边框在表格标记里用 border 表示, 语法形式如下 <! 设置表格的边框 --> <table border=1> 标记 border 后面的值是宽度值, 表示对象的边框宽度, 数值越大, 宽度就越大, 代码 8.4 是用实例表示表格边框宽度的 <title> 表格边框宽度 </title> <body> <table border=5> <td> 表格宽度 </td> <td> 表格宽度二 </td> 代码 8.4 源代码 \ 第 8 章 \ 表格边框宽度.html

$5 所示 <title> 设置表格大小 </title> <body> <table border=1 width=300 height=200> <td> 表格宽度 </td> <td> 表格宽度二 </td> <td> 第二行表元 </td> <td> 第二行表元二 </td> 代码 8.5 源代码 \ 第 8 章 \ 设置表格大小.html$

6 103 <td> 第二行表元 </td> <td> 第二行表元二 </td> 上面代码用表格表示了两行两列, 并且边框为 5, 在显示效果时, 每个表项的边框还是默认的 1, 而所处在表格的外边框的宽度就变成 5 了, 其中设置的数值越大, 其表格边框也越宽效果如图 8.4 所示图 8.4 设置表格边框设置表格高度和宽度除了对表格边框设置大小外, 对整个表格也可以设置其大小, 与其他参数一样, 只在标记 table 中, 设置宽度用 width 表示, 而高度用 height 表示在网页中的表格按设置的值来显示, 如下代码表示设置表格的高和宽, 即在表格标记 <table> 中, 设置 width 为 300, 设置 height 为 200, 默认单位值为像素, 如代码 8.5 所示 <title> 设置表格大小 </title> <body> <table border=1 width=300 height=200> <td> 表格宽度 </td> <td> 表格宽度二 </td> <td> 第二行表元 </td> <td> 第二行表元二 </td> 代码 8.5 源代码 \ 第 8 章 \ 设置表格大小.html

7 104 在代码 8.5 中, 设置表格的宽度为 300, 高度为 200, 且其单位默认的是像素, 故所表示的是一个宽为 300 像素, 高为 200 像素的表格, 其中表格又存在二行二列, 且二行二列的大小刚好是表格大小, 效果如图 8.5 所示图 8.5 设置表格大小 8.4 表格内文字对齐在表格内, 文字对齐有在 tr th 和 td 中对齐, 在 tr 设置对齐方式后,tr 内的 th 和 td 都按设置的要求对齐, 同理在多行中可以设置不同的 tr 对齐方式,th 和 td 都可以设置其里面的文字或图片的对齐对齐语法用 align 表示, 后面接的值是 left center 和 right, 分别代表向左居中和向右对齐, 语法形式如下 : <! 设置表格对齐 --> <tr align=#> <th align=#></th> <td valign=#></td> 上面代表对齐在 tr th 和 td 中,# 表示 align 后面接的值, 即 left center 和 right 中的一个, 代码 8.6 表示在表格内文字对齐 <title> 对齐 </title> <body > 代码 8.6 源代码 \ 第 8 章 \ 表格内文字对齐.html

8 105 <! 设置表格边框和宽度 --> <table border="1" width="300"> <! 设置表格的行居中对齐 --> <tr align="center"> <! 设置表格行向右对齐 --> <tr align="right"> <! 设置表格对齐为默认值, 即向左 --> 上面代码 8.6 中, 在表格中第一行用居中对齐, 第二行向右对齐, 第三行默认的向左对齐, 所以可以省略不写, 效果如图 8.6 所示图 8.6 表格内文字对齐注意 : 向左对齐是默认的, 写不写 align=left 都一样 8.5 表格在网页中对齐表格是有大小的, 有时在网页中需要调节表格位置, 如放在网页中间或网页右边, 需要对表格进行设置, 设置表格在网页中的对齐与上一节一样, 都会用到 align 语法, 但不同的是在 <talbe> 标签对中, 下面是表格在网页中的对齐形式 <table align=#> # 表示与上一节也相同, 就是 left center 和 right 代码 8.7 表示表格在网页的右边显示代码 8.7 源代码 \ 第 8 章 \ 表格在网页右边.html

9 106 <title> 表格在网页中的对齐 </title> <body > <! 设置表格在网页右边对齐 --> <table align=right border="1" width="300"> <! 设置表格的行 --> <! 设置表格的列, 即表项 --> 上面代码中表示表格在网页向右对齐, 同理可以设置 align 为 center 居中, 设置 align 为 left 向左对齐, 需要重视的是默认都是向左的, 而本实例演示表格在网页中向右对齐, 效果如图 8.7 所示图 8.7 表格在网页中向右对齐技巧 : 在 table 中的对齐主要是对表格在网页的位置对齐, 而在 tr th td 对齐是相对文字对齐方式 8.6 表格实例手把手表格标记 (table) 在网页中用来表示一张表格, 其内可以用来布局, 也可以用来显示表格中的内容插入表格的方法为在标记对 <body> 中放表格标记对 <table>, 其中表格标记对中, 还需要用一些标记表示表格中的内容, 如用 th 表示表头,td 表示表元

10 107 等, 这些标记都被包含在表格标记中本实例用表格做一张课程表, 通过表格知识来实践网页中的表格表示, 首先选取确定表格中的行和列数, 然后确定有没有必要做表头, 请看下面步骤表格中嵌入表格确定表格行和列数并写上表头课程在一星期中只有五天, 确定有五列, 如果按一天上四节课, 分上午和下午, 则确定有四行, 如代码 8.8 所示 <title> 表格实例手把手 </title> <body> <! 设置表格 --> <table border="1"> <! 设置表格的行 --> 代码 8.8 源代码 \ 第 8 章 \ 实例手把手.html <! 设置表格的列 --> <th> 星期一 </th><th> 星期二 </th><th> 星期三 </th><th> 星期四 </th><th> 星期五 </th> <td>html 基础 </td><td> 计算机图形学 </td><td>c 语言程序设计 </td><td> 计算机导论 </td><td> 计算机图形学 </td> <td>c 语言程序设计 </td><td> 计算机导论 </td><td>c 语言程序设计 </td><td> 法律基础 </td><td>html 基础 </td> <td> 计算机图形学 </td><td>c 语言程序设计 </td><td> 计算机导论 </td><td> 法律基础 </td><td> 计算机导论 </td> <td>c 语言程序设计 </td><td> 计算机图形学 </td><td>html 基础 </td><td> 计算机图形学 </td><td>html 基础 </td> 上面代码中, 设置了五行文本, 且每行有五列, 默认向左对齐, 其中第一行为表头, 用 th 表示, 效果如图 8.8 所示

$108 图 8.8 表格行和列 8.6.2 设置跨行和跨列上一节设置了表格并添加表格中的课程, 在多行和多列的表格中, 需要对相同的课程进行合并, 即所谓的对部分重复的课程跨行或跨列, 这就需要对这些表元进行跨行和跨列, 如代码 8.9 所示 <title> 表格实例手把手 </title> 代码 8.9 源代码 \ 第 8 章 \ 实例手把手.$

11 108 图 8.8 表格行和列设置跨行和跨列上一节设置了表格并添加表格中的课程, 在多行和多列的表格中, 需要对相同的课程进行合并, 即所谓的对部分重复的课程跨行或跨列, 这就需要对这些表元进行跨行和跨列, 如代码 8.9 所示 <title> 表格实例手把手 </title> 代码 8.9 源代码 \ 第 8 章 \ 实例手把手.html <body> <table border="1"> <th> 星期一 </th><th> 星期二 </th><th> 星期三 </th><th> 星期四 </th><th> 星期五 </th> <td>html 基础 </td><td> 计算机图形学 </td><td rowspan="2">c 语言程序设计 </td><td> 计算机导论 </td><td> 计算机图形学 </td> <td>c 语言程序设计 </td><td> 计算机导论 </td><td rowspan="2"> 法律基础 </td> <td> 计算机图形学 </td><td>c 语言程序设计 </td><td> 计算机导论 </td><td> 计算机导论 </td><td>html 基础 </td> <td>c 语言程序设计 </td><td> 计算机图形学 </td><td>html 基础 </td><td> 计算机图形学 </td><td>html 基础 </td>

12 109 上面代码中, 设置了单元格中的跨行, 即在第三列的第二第三行合并成一行, 同时, 在第三行的第四列和第五列并成一行, 课程表中相同的内容在表元中进行跨多行和跨多列所表现的效果如图 8.9 所示图 8.9 跨多行和跨多列综上所述, 现实生活中对表格的应用远远多于本实例, 有的在布局中用到, 还有在网页中插入表格等对 table 的理解从 tr th 和 td 这三个标签上入手是比较快的, 通过实例分析更容易掌握 8.7 小结本章讲解了表格的应用, 首先从表格基本知识上, 对语法进行介绍, 然后通过对跨多行跨多列的学习, 理解了一张表格中为什么很多单元格都合并了在表格中对齐文字, 可以设置表格内的文字往哪边对齐, 同时对表格在网页中对齐也做了介绍, 这点在布局中非常重要最后通过实例全面地应用表格用法

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /

Microsoft Word - 第8章 表格11ok.doc

Microsoft Word - 第8章表格11ok.doc