HTML语言 使用TABLE排版
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本篇先介绍一个如何 table 进行排版。
对于没有基础的朋友来说，使用 table 排版是最为简单易行的。
Table 排版可以理解为，将整个网页放在一个大的表格内。调正没个单元格的大小，使其在
合适的位置，显示需要显示的内容。最后将表格的边框宽度设为 0（即 border = “0”，默认
为 1）。
Table 的一般格式如下：
以上介绍的框架介绍，可以缩减为如下： <html> <head> <title></head> </head> <body> </body> </html> 简单地说，网页做成如下格式，即可形成网页布局格式。 <head></head>之间有一个<title></title>,这是用来填写网页的标题的（即在网页标题栏中现 实的内容），比如，百度的标题就是 百度一下，你就知道。<head></head>之间还会用来 定义 CSS 的属性，关于 CSS，将在以后讲解。
<tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td>
</tr> </table>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
Align 的属性有：
Valign 属性有： 具体操作，由读者进行实验。（可在 dreamweaver 或者 txt 文本文档中进行）。
接下来，我们对合并单元格做一下介绍：
毕竟，有时，我们需要某一行只显示一个内容，而又要让他进行居中显示，并且之后的内容
还需要全部平均分布在他的下方。这会为难部分读者。 <HTML>语言同样考虑到了这点。
就在<tr>上修改。 当然如果要是对整个 table 设置，就可以直接直接在<table>设置，（注： 如果<tr><td>中都 没有任何的长高填写设置，就默认平均分配）。
设置 table 的长的表达式： 设置 table 的高的表达式：
width = “设置的数值，单位是 px” height = “设置的数值，单位是 px”
显示效果如下：
试问： 如果上述代码中 colspan 改为 等于 5，是一个什么样的效果？ 此处不做过多解释， 效果如下所示，读者可自行操作实验：
最后我们需要讲到，关于对不同单元格的长高设置：
这个应该说是比较容易理解的，与之前的设置文本的对其方式大体相仿。
如果需要让某一个单元格修改，就可以直接在单元格上操作。如果让一行单元格修改，那么
附：模仿百度的整个主页的代码（个人制作，如有不足，请指正） 我们使用 table 对百度的首页进行一个模仿，让读者进一步加深理解。（仅仅设置文字，不 进行超级链接设置。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
汇总部分使用 HTML 语言编写网页的基础知识
当使用文本文档打开一个网页格式的文档后，会出想一整屏幕的代码。其实，细心观察，便 会发现这都是在一个框架的基础上添加的内容，其框架如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head>
<body> </body> </html>
解释： <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
所以，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 声 明 了 文 档 的 根 元 素 是 html ， 它 在 公 共 标 识 符 被 定 义 为 "-//W3C//DTD XHTML 1.0 Transitional//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。 （此处只做介绍，了解即可，只要在写网页代码时，将这段加载到网页的最前端即可。）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度一下，你就知道</title>
<style type="text/css">
上边是一个 2 行 6 列的单元格。在网页中可以作出如下定义： <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> 讲的再通俗一点的话： 想要定义一个 n 行 m 列的 table 就在<table></table>之间写 n 个 <tr></tr>，每一个<tr></tr>中添加 m 个<td></td>。 相信读者看到这里，应该可以定义一个简单的 table 了。 当然我们现在能够制作一个简单的表格了，但是距离排出一个漂亮的版面，还有一定的距离。 这其中包括需要知道所有的关于 table 的属性，以及在什么位置进行添加。 下面，我们就对其中的部分重要属性进行演示。 1、 定义一个长 960px（px 即为像素，在网页中默认使用的大小单位。）高 500px 的 10 行，
通过这里，就可以看出，整个关于<table>的属性都是如下规则： 表达式 = “属性值” 在<table>中还会用到对其方式， 如果对某一个单元格设置对其方式那么就在这个单元格所对应的<td>中写 align=" " valign=" "，即<td align="center" valign="middle"> 其中 align 表示水平方向上的对其方式， valign 表示竖直方向上的对其方式。 如果要对某一行的单元格进行相同的设置，可以在<tr>中定义，即<tr align="center" valign="middle">. 如果要对整个表格进行设置，只能是在每一个<td>上设置，或者在每一个<tr>上进行设 置了。
接下来，就会出现<body></body>了，这是网页的主体部分，也就是说，所有你在网页上能
看到的东西，基本上都是在<body></body>之间写出来的。接下来我们介绍的内容，都将是 在<body></body>之间写出来。
二、布局排版方式：
布局排版方式，此处仅介绍两种：table（表格）排版， div（层）排版
<tr>
<td colspan="12" align="right">
搜索设置|登录注册</td>
</tr>
<tr>
<td colspan="12" align="center"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"
/></td>
<table>
//声明一个 百度文库able
<tr>
//声明 table 有一个行
<td>在此处填写需要填写的内容</td>
//声明 table 的这个行中有一个单元格
</tr>
//闭合此行
</table>
//闭合此 table
注：在一个 table 中可以有多个<tr>出现，即表示有多个行。每个<tr>中又可以含有多个<td>, 即表示一行中有多个单元格。
</tr>
</table>
我们需求是让第一行全部合并，这就会用到 colspan 属性，其使用方法为：在需要连续合并
的最左侧的单元格的<td>中写: <td colspan="合并单元格个数宽度">，然后将此行剩下的 <td></td>全部删除。 注：刚刚提到的“最左侧的单元格”，就是说的需要合并的这一行的左边数第一个单元格。
//CSS 的定义
#input {
width: 440px;
height: 30px;
}
#menu {
height: 35px;
width: 90px;
}
</style>
</head>
<center>
//使用了一个属性，将整个页面居中显示，不要忘记最后需要闭合
<body>
<table width="1156" height="189" border="0">
以上为整个 table 的事例。
读者很容易猜到，在<table width="960" height="500" border="1">处，定义了 table 的长 和高，以及表格边框的宽度。除了这三个属性之外，还有一个重要的属性就是定义表格背景
色，可以将其定义为一个不同于网页的颜色，可以在<table>中填写代码 <table bgcolor = “red”>（将背景色设为红色为例）。
5 列的表格。 其代码如下所示： <table width="960" height="500" border="1"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr> <tr>
<td></td> <td></td> </tr>
我们还是用一个事例来进行讲解：
我们依旧以 2 行 6 列的表格为例：
1
2
3
4
5
6
7
8
9
10
11
12
代码如下：
<table>
<tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
</tr>
<tr>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
也就是上边 2 行 6 列的表格中显示数字“1”的那个单元格所对应的<td>。 如果我们要是想要将第 2 行的单元格全部合并，就可以需要在显示数字“6”的那个单元格
所对应的<td>中填写 colspan 属性。
回到我们刚刚说的主题，需要将第一行的单元格全部合并，那么就可以填写如下代码： <table> <tr> <td colspan = “6”></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>