工信版（中职）Web前端设计基础 项目三电子课件
2022-10-25
|
47页
|
71人阅读
|
6人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.61 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-04-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574071.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目三电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
网页中的表格
项目三
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
一 项目描述
本项目学习要点
表格的基本结构；
编辑表格；
CSS属性设置。
完整的表格标签；
二 知识准备
表格基本结构；
编辑表格；
完整的表格标签。
表格基本结构
在HTML文档中，使用表格可以清晰地排列数据和布局，但不建议使用表格布局，在web2.0时代，表格定位已经过时了，现在使用的是“DIV+CSS”模式。
表格一般由行、列和单元格组成，如图所示。
行
列
单元格
表格基本结构
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
在HTML5中，用于创建表格的标签如表所示。
标签 说明 注意事项
<table> 用于标记一个表格对象的开始 一个表格中，只允许出现一对<table></table>标签
</table> 用于标记一个表格对象的结束
<tr> 用于标记表格一行的开始 表格内有多少对<tr></tr>标签，就表示有多少行
</tr> 用于标记表格一行的结束
<td> 用于标记表格某行中的一个单元格的开始 <td></td>标签应写在<tr></tr>标签内，一对<tr></tr>标签内有多少对<td></td>标签，就表示有多少个单元格
</td> 用于标记表格某行中的一个单元格的结束
表格基本结构
在Sublime中创建表格的快速输入方法是输入【table】后按Tab键可以生成一对<table></table>标签，但不能构成一个有行有列的表格，最基本的表格必须包含一对<table></table>标签、一对或几对<tr></tr>标签以及一对或几对<td></td>标签。
例如在Sublime编辑器中输入【table>tr*2>td*2】后按Tab键可以生成一个2行2列的表格代码，如图所示。
表格的行高和列宽会根据表格内容发生变化，如果想控制表格的行高和列宽，需要在<tr>和<td>标签中用width和height来定义行高和列宽。
表格基本结构
例3-1
创建一个4行3列的表格，网页主体代码如下所示（示例文件3-1.html）。
<body>
<table border="1" cellpadding="0" cellspacing="0">
<caption>图书统计表</caption>
<tr height="40px">
<td width="50px">序号</td>
<td width="250px">名称</td>
<td width="200px">出版社</td>
</tr>
<tr height="40px">
<td>1</td>
<td>Web前端设计基础</td>
<td>北京理工大学出版社</td>
</tr>
<tr height="40px">
<td>2</td>
<td>Photoshop CS5图像处理项目教程</td>
<td>北京理工大学出版社</td>
</tr>
<tr height="40px">
<td>3</td>
<td>计算机应用基础</td>
<td>北京理工大学出版社</td>
</tr>
</table>
</body>
border用来设置表格边框，默认情况下表格是没有边框的，加入边框是让读者更清楚地看到表格结构，如值为0则表格无边框，如值为1表格边框为1像素；cellpadding用来设置单元格内容与其边框之间的距离；cellspacing用来设置单元格之间的距离。
height用来设置表格行的高度。
width用来设置表格行宽。
表格基本结构
例3-1
创建一个4行3列的表格，网页主体代码如下所示（示例文件3-1.html）。
<body>
<table border="1" cellpadding="0" cellspacing="0">
<caption>图书统计表</caption>
<tr height="40px">
<td width="50px">序号</td>
<td width="250px">名称
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。