第4课 表格
知识点
会使用表格实现数据展示
表格是块状元素，发明该标签的初衷是用于显示表格数据。例如，学校中常见的考试成绩单、选修课课表、企业中常见的工资账单等。
一、 表格的基本结构
(一) 单元格
表格中的最小单位，一个或多个单元格纵横排列组成了表格。
(二) 行
一个或多个单元格横向排列就形成了行。
(三) 列
由于表格单元格的宽度必须一致，所以单元格纵向排列形成了列。
二、 表格的基本语法
(一) 创建表格的语法
<table>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>
说明：
表格标签<table>……</table>；
行标签<tr>……</tr>，可以有多行；
单元格标签<td>……</td>
(二) 创建表格的步骤
第一步：创建表格标签<table>…</table>
第二步：在表格标签<table>…</table>里创建行标签<tr>…</tr>,可以创建多行
第三步：在行标签<tr>…</tr>里创建单元格标签<td>…</td>,可以有多个单元格。
(三) 演示：基本表格
-
需求
(1) . 创建一个2行3列的基本表格
(2) . 表格有边框
(3) . 表格的宽度跟浏览宽度一样 -
演示效果
-
参考代码
<table border="2" width="100%">
<tr>
<td>第一行第一个单元格</td>
<td>第一行第二个单元格</td>
<td>第一行第三个单元格</td>
</tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
<td>第三行第三个单元格</td>
</tr>
</table>
(四) 表格的基本属性 -
边框和宽度
为了显示表格的轮廓，一般在创建表格时，会设置<table>标签的“border”边框属性，用于指定边框的宽度。
<table>标签中的width属性用于设置表格在浏览器的宽度
这个二个属性在单元格中也适用。 -
表格的对齐方式
(1) . 表格的对齐方式用来控制表格在网页中的显示位置，常见的对齐方式有默认对齐，左对齐，居中对齐和右对齐。
(2) . 而实现表格对齐方式的属性是align，其取值有：center、left、right
演示代码
<table border="2" align="center">
<tr></tr>
<tr></tr>
</table> -
单元格对齐方式
除了表格可以设置对齐方式，对于单元格也同样可以设置对齐方式，单元格对齐则分为水平和垂直对齐两个方向。其取值如下表所示：
属性 值 说明
align：水平对齐方式 left 左对齐
center 居中对齐
right 右对齐
valign:垂直对齐方式 top 顶端对齐
middle 居中对齐
bottom 底端对齐
baseline 基线对齐
单元格对齐方式的演示
<table border="2" align="center">
<tr>
<td width="660" height="60" align="right" valign="bottom">第一行第一个单元格</td>
</tr>
</table> -
经验
在实际开发中，很少使用表格属性来控制表格样式，一般都使用CSS样式来设置表格的样式。
三、 表格的跨行与跨列
上面介绍了简单的表格的创建，而现实中往往需要较复杂的表格，有时就需要把多个单元格合并为一个单元格。
(一) 表格的跨列 -
描述
跨列是指单元格的横向合并。 -
语法
<table>
<tr>
<td colspan="n">单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
……
</tr>
......
</table>
说明
col是column(列)的缩写，span是跨度，所以colspan的意思是跨列。 -
演示案例：跨列
实现效果
核心代码
<table width="200" border="1">
<tr>
<td colspan="2">
学生成绩
</td>
</tr>
<tr>
<td>
语文
</td>
<td>
98
</td>
</tr>
<tr>
<td>
数学
</td>
<td>
95
</td>
</tr>
</table>
(二) 表格的跨行
- 描述
跨行是指单元格在垂直方向向上合并。 - 语法
<table >
<tr>
<td rowspan="n"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
说明
row为行的意思，rowspan即跨行 - 演示案例
实现效果
核心代码
<table width="300" border="1">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
(三) 表格的跨行与跨列
- 描述
有时表格中既有跨行又有跨列的情况，从而形成相对复杂的表格显示。 - 案例演示
实现效果
核心代码
<table width="200" border="1" >
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
四、 课堂作业
(一) 作业：制作淘宝店铺列表页面
- 训练要点
(1) . 掌握表格、单元格的属性
(2) . 使用表格的嵌套制作网页 - 实现思路
(1) . 根据页面结构布局整体页面
(2) . 合理地在单元格中嵌套表格
(3) . 设置单元格的跨行或跨列
(4) . 设置单元格的水平对齐方式 - 效果图
五、 课后作业
(一) 新浪微博
- 需求
根据效果图制作新浪微博首页
网友评论