《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 07.表格标签

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1认识表格02表格标签03表格标签的常用属性04合并单元格目录contents05表格嵌套PART1认识表格问题1：网页中哪些地方会用到表格？问题2：表格由什么组成？表格的作用表格主要用于显示和展示数据，可以让数据显示非常规整表格的作用后端中对数据进行编辑例如添加、删除、修改数据等，方便用户对数据进行更新和管理一张表格横向叫行，纵向叫列。行列交叉的部分就称为单元格。单元格是网页布局的最小单位。单元格中的内容和边框之间的距离称为边距。单元格和单元格之间的距离称为间距。整张表格的边缘称为边框。认识表格PART2表格标签表格标签利用<table>标记来定义一个表格，一级<tr>…</tr>是设定一个行，一级<td>…</td>则是设定一个列<table>

<tr>

<td>单元格内的文字</td><td>单元格内的文字</td>

...

</tr>

...<tr>

<td>单元格内的文字</td><td>单元格内的文字</td>

...

</tr>

</table>

```表格的基本语法table定义表格的标签tr定义表格中的行，必须嵌套在table中td定义表格中的单元格，必须嵌套在tr中标签描述<table>定义表格<th>定义表格的表头<tr>定义表格的行<td>定义表格单元<caption>定义表格标题<thead>定义表格的页眉<tbody>定义表格的主体<tfoot>定义表格的页脚表格标签创建表格1.<table></table>用于定义表格的标签。2.<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中，在table中包含几对tr，就表示有几行。3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对<tr>中包含几对<td>，就表示该行中有多少列（或多少个单元格）。注意：1.<tr></tr>中只能嵌套<td></td>2.<td></td>标签，他就像一个容器，可以容纳所有的元素表格标题标签<caption>caption元素定义表格标题。

<table>

<caption>我是表格标题</caption>

</table>caption标签必须紧随table标签之后。对每个表格定义一个标题。通常标题会被居中于表格之上。表格头部部分和主体部分划分PART3表格标签的常用属性表格属性实际开发中，表格属性不常用，会用CSS来设置其样式属性常用属性值描述alignleft、center、right规定表格相对周围元素的对齐方式border1（数字）规定表格单元是否拥有边框cellpaddingpixels规定单元边沿与其内容之间的空白cellspacingpixels规定单元格之间的空白widthpixels、%规定表格的宽度Heightpixels、%规定表格的高度任务实践（1）创建站点文件夹，准备好素材资源文件夹，新建一个名为501.html文件（2）如图所示创建一个6行6列的表格，输入内容（3）给table标签添加属性：宽度为800px、边框为1、表格居中、单元格之间间距为0（4）用caption添加表格标题，标题中放置图片，设置图片宽度为100%（5）将表格划分为表头部分和表体部分，对结构标签添加属性内容居中对齐（6）将表头行内单元格修改为表头单元格标签任务1农产品电商市场运行大数据图表任务实践任务1农产品电商市场运行大数据图表PART4合并单元格问题1：表格单元格合并有几步，请说出合并步骤？合并的思想：1.确认的是合并方式（跨行还是跨列？）2.找到目标单元格书写单元格合并属性3.删除多余的单元格。合并单元格合并方式同一行内的合并，叫作跨列合并，用colspan属性。同一列内的合并，叫作跨行合并，用rowspan属性。跨行合并rowspan跨列合并colspan目标单元格的选择跨列合并时，本着从左到右的原则，目标单元格位于左侧第一个单元格。跨行合并时，本着从上到下的原则，目标单元格位于上方第一个单元格。合并的顺序：先上后下先左后右跨行合并rowspan跨列合并colspan目标单元格：最上面的单元格为目标单元格

最左面的单元格为目标单元格删除多余单元格跨行合并：rowspan

=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”公式：

删除的个数

=

合并的个数

-1任务实践任务2我的订单页面任务实践片名类型国别片长票价影厅放映时间流浪地球科幻中国125分钟70泰山厅14:10、16:30、18:50、21:1050华山厅11:30、14:10长津湖战争中国176分钟70恒山厅14:00、17:00、20:00、23:0050嵩山厅09:30、12:30、15:30寻梦环游记动画美国105分钟50华山厅09:50、11:10、14:00正在热映《流浪地球》、《长津湖》、《寻梦环游记》，欢迎来电预定：888888亲爱的影迷朋友们：电影开播前10分钟，开始检票！影城排片表PART5表格嵌套表格的嵌套<tableborder="1"cellspacing="0"cellpadding="5"width="800"align="center">

<tr><td><imgsrc="imgs/905-2.jpg"alt=""width="800"></td>

</tr>

<tr><td><table

border="1"cellspacing="3"width="800"><tralign="center"><td>旅游须知</td><td>旅游景点</td><td>旅行图库</td><td>特