项目展示
个人简历项目展示如图10.1所示，表格嵌套项目展示如图10.2所示。
图10.1 个人简历项目展示
图10.2 表格嵌套项目展示
教学内容
表格1
1. 认识表格
在网页设计中，表格可以用来布局排版，进行网页的整体布局。在开始使用表格之前，本节首先对表格的各部分的名称进行介绍，如图10.3所示。正如Word中所讲述的表格一样，一张表格横向叫行，纵向叫列。行列交叉的部分就称为单元格。单元格是网页布局的最小单位。有时为了布局需要，可以在单元格内插入新的表格，有时可能需要在表格中反复插入新表格，以实现更复杂的布局。单元格中的内容和边框之间的距离称为边距。单元格和单元格之间的距离称为间距。整张表格的边缘称为边框。
图10.3 表格各部位名称
利用〈table〉标记来告诉计算机定义一个表格，border=1是设定表格的框线粗细。一级〈tr〉…〈/tr〉是设定一个行，一级〈td〉…〈/td〉则是设定一个列，文字就写在这里面。另外，用户还可以自己设定表格的“宽”及“高”，如〈table width="400px" border="1" height="100px"〉表示表格的宽为400像素，高为100像素；利用align="center"可以让表格对象居中对齐；利用bgcolor="pink"将表格的背景颜色设为粉红色。表格的一些常用属性如图10.4所示。
图10.4 表格基础属性
2. 创建表格
表格是用于在页面上显示表格式数据以及对文本、图形进行布局的工具，可以控制文本和图形在页面上出现的位置。
创建一个表格并对表格设置基本参数，具体操作过程如下：
步骤1：创建一个表格代码结构如下：(www.xing528.com)
〈table〉用于定义一个表格。〈tr〉用于定义表格中的一行，必须嵌套在〈table〉标签中，在〈table〉中包含几对〈tr〉，就有几行表格。〈td〉用于定义表格中的单元格，必须嵌套在〈tr〉〈/tr〉标签中，一对〈tr〉〈/tr〉中包含几对〈td〉〈/td〉，就表示该行中有多少列（或多少个单元格）。
注意：
① 〈tr〉〈/tr〉中只能嵌套〈td〉〈/td〉。
② 〈td〉〈/td〉标签，就像一个容器，可以容纳所有的元素。
步骤2：创建表格行列数。
按步骤1输入想要创建表格的行列数、表格宽度、边框粗细值、单元格边距和单元格间距的值，书写完各项属性值后，可编辑一个表格。如编辑一个9行5列的表格，可以在〈table〉标签里输入tr*9〉td*5，加TAB键快速生成。
步骤3：设置表格基本参数。
表格创建后，可以设置表格的宽度（width），高度（height），外边框（border）以及单元格和单元格之间的距离（cellspacing），内容与单元格之间的内边距（cellpadding）值。也可以用CSS元素进行编辑。
步骤4：输入内容。
可以在单元格内插入文本或者图片的元素。
3. 表格合并单元格
进行合并单元格，跨行合并是rowspan，跨列合并是colspan。合并单元格的思想是：将多个内容合并的时候，就会有多余的单元格，正确选择并把它删除。
例如：把3个td合并成一个，那就多余了2个，需要删除。
4. 表格结构划分
表格划分为表头〈thead〉〈/thead〉、表主体部分〈tbody〉〈/tbody〉以及表脚注部分。〈caption〉〈/caption〉为表格标题。这些标签使表格结构更加清晰。
任务训练
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
