网 站 设 计 与 建 设 Website design and developments
第三部分 网站设计技术 第11章 HTML表格与页面结构
表在页面结构中的作用 网页结构的布局手段：表、框架 表格是网页的基石，可创建复杂有效页面结构 表格能够完全控制页面及其元素
表与框架的比较 表和框架都可以构造网页的布局结构 表可以很容易地为页面加书签或添加到收藏夹，框架组合页面则不可以。 表布局结构在垂直或水平滚动时，页面所有内容滚动；框架布局允许创建彼此独立的页面区域。
11．1 HTML表格的基本结构 <table border=1> <tr> <td>学号</td> <td>姓名</td> <td>成绩</td> </tr> <td>001</td> <td>李明</td> <td>85</td> <td>002</td> <td>王刚</td> <td>91</td> <td>003</td> <td>张玲</td><td>78</td> </table>
<table>、<tr>、<td>、<th>是表格中最常用的四个标记 表格大小 <table width=x1 height=x2> 属性值的x1和x2可以是绝对值也可以是相对值 <table border=1 bgcolor="#008080"> <caption>标记来为表格增加标题。 通常情况下，<caption>标记位于 <table>标记的后面。 <tr>、<td>、<th>可以对行与单元格的相关属性进行设置 <tr bgcolor="#008080">
不规则表格 <body> <table border="2"> <tr> <td rowspan="2">Cell 1</td> <td>Cell 2</td> </tr> <td>Cell 3</td> </table> </body> </html>
<table border="2"> <tr> <td rowspan="5">Cell 1</td> <td colspan="3" align="center">Cell 2</div></td> </tr> <td colspan="3" align="center">Cell 3</div></td> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td colspan="3">Cell 7</td> <td colspan="3">Cell 8</td> </table> </body> </html>
11．2 HTML表格与页面布局 <body> <table WIDTH="100%" HEIGHT="100%" CELLSPACING="0" CELLPADDING="2" BORDER="0"> <tr> <td rowspan="2" WIDTH="20%" BGCOLOR="yellow" ALIGN="center" VALIGN="middle">Cell 1</td> <td HEIGHT="20%" BGCOLOR="lightblue" ALIGN="center" VALIGN="middle">Cell 2</td> </tr> <td HEIGHT="80%" BGCOLOR="beige" ALIGN="center" VALIGN="middle">Cell 3</td> </table> </body> </html> Beige beig 米色
cellpadding，是补白，是指单元格内文字与边框的距离 cellspacing，两个单元格之间的距离
单元格1 单 元 格 2 单元格3 单元格5 单元格6 单元格4
需要注意的问题 ①无边界网页结构 ②尺寸的定义方式 ③图片的插入 ④多表格页面布局 表格的border属性值设置为0，从而使得表格的边界消失，但设计时表格边框会显示成浅灰色边框。 ②尺寸的定义方式 一般来说作为布局手段的表格，通常采用相对比例的方式确定表格大小。 ③图片的插入 如果某个图片本身比较大，最好将其进行切分，在图片显示位置上放置多个单元格，然后将整个图片拼接在这些单元格中。这是因为， ④多表格页面布局 在使用表格进行网页布局时，最好不要把整个页面的内容都放在一个表格中，应该用多个表格来分段显示整个网页的内容。这也是因为浏览器要显示表格内容的时候，要把表格中的所有内容都下载后再统一显示。
思考题： 11.1 表格中常用的标记有哪些？它们的作用分别是什么？ 11.3 表格和框架的区别是什么？ 11.7 rowspan、colspan功能是什么？