【网页布局技术】项目六 制作表格并使用CSS美化
《CSS+DIV网页样式与布局案例教程》 徐琴
目录
- 任务一 制作2012年世界杯分组表——构建和美化表格
- 支撑知识点
- 一、表格的HTML标签
- 1.表格主体标签```<table>```
- 2．行标签```<tr>```
- 3．单元格标签```<td>```
- 4．表头标签```<th>```
- 5．标题标签```<caption>```
- 二、合并和拆分单元格
- 三、使用CSS设置表格或单元格颜色
- 四、使用CSS设置表格或单元格大小和边框
- 任务二 制作日历单元格——使用CSS控制表格进阶
- 支撑知识点
- 一、使用CSS设置网页元素的内边距和外边距
- 二、使用CSS合并表格边框
任务一 制作2012年世界杯分组表——构建和美化表格
在网页设计中，表格占有很重要的地位。在以前，我们主要使用表格来对网页进行布局和分类显示数据。现在，表格在网页制作中主要用来显示后台数据。将后台数据显示在一个表格中，不但可以使数据结构看起来容易阅读，也可以让整个页面美观合理。
本任务中，我们通过制作2012年世界杯分组表，来学习与表格相关的HTML标签，掌握构建表格的结构，以及使用CSS美化表格的操作（如设置单元格高度、宽度、颜色和边框等）。
支撑知识点
一、表格的HTML标签
1.表格主体标签<table>
与其他HTML元素一样，表格也是由标签组成的。下面介绍表格各组成标签的意义。
<table></table>标签对为表格的主体标签，表格的其他组成元素，如行标签、单元格标签等都包含在<table></table>标签对之间。width=“70%” border=“0” cellspacing=“0” cellpadding="0"为<table>标签的相关属性和属性值，表示该表格的宽度为其父元素的70%，其边框粗细、单元格边距以及单元格间距均为0。
2．行标签<tr>
<tr></tr>标签对为表格的行标签，表格有多少行，就有多少个<tr></tr>标签对。在每行中可以包含多个单元格。
3．单元格标签<td>
<td></td>标签对为表格的单元格标签，其包含在<tr></tr>标签对中。单元格用于存放表格要显示的内容，可以是任意的HTML内容，这些内容位于<td></td>标签对之间。在表格的一行中可以包含多个单元格。
4．表头标签<th>
<th></th>标签对为表格特有的表示表头单元格的标签，在Dreamweaver的设计界面中创建表格时可以选择表头所在的位置。在上面的代码中，scope为<th>标签的属性，表示定义表头，"col"为属性值，表示将当前列的所有单元格和表头单元格联系起来。
5．标题标签<caption>
<caption></caption>标签对为table表格特有的表示标题的标签，同<th>标签不同的是，<caption>标签不需要合并，它本身就只有一列，同时<caption>标签的位置是默认居中的。
二、合并和拆分单元格
要合并单元格，可先选中要合并的多个单元格，然后单击属性检查器中的“合并单元格”按钮；要拆分单元格，可将插入点置于要拆分的单元格中，然后单击“属性”面板中的“拆分单元格”按钮 ，在弹出对话框中选择需要拆分为的单元格类型，并输入要拆分为的行数和列数，然后单击“确定”按钮即可。
三、使用CSS设置表格或单元格颜色
使用CSS设置单元格内文字的颜色，以及表格或单元格的背景的方法与我们在项目三和项目四中学习的设置文字颜色和网页元素背景相同。例如，可以使用color属性设置单元格内文字颜色；使用background-color属性设置单元格、行或表格背景颜色；使用background-image属性设置表格、行或单元格背景图片。
四、使用CSS设置表格或单元格大小和边框
同样，使用CSS设置表格或单元格大小和边框等的操作与我们在项目四中学习的设置图片和其他块元素相同。例如，可以使用width属性设置整个表格或单元格宽度；使用height属性设置整个表格或行的高度；使用border属性设置表格或单元格的边框。如代码table{ border:1px solid red;}，表示设置整个表格的边框粗细为1像素，实线，红色。
任务二 制作日历单元格——使用CSS控制表格进阶
通过前面的学习，大家已大致了解了一个表格应该有什么样的表现形式。下面，我们再通过制作一个表格形式的月历（以2012年9月为例），此月历的基本结构如下图所示，显示效果为：8月及10月的部分日期颜色为灰色，而9月的日期颜色为黑色；当将鼠标指针移动到单元格上时单元格的颜色会发生变化。
支撑知识点
一、使用CSS设置网页元素的内边距和外边距
在前面的学习中，我们已经多次接触到了CSS的margin和padding属性。其中，margin属性用来设置元素的外边距，即元素与其他相邻元素之间的间距；padding属性用来设置元素的内边距（也称填充），即元素内容与元素边框之间的空间。
二、使用CSS合并表格边框
使用CSS设置单元格边框时，假设为每个单元格都设置边框宽度为1px，那么当两个单元格都相邻的时候，相邻边的边框宽度实际上是1px+1px=2px。为了避免此情况发生，或为了避免单元格之间出现空隙，可使用border-collapse属性将表格相邻的边框合并。
border-collapse属性的基本语法为：
border-collapse:separate|collapse|inherit;