HTML第三章 表格和层

第三章表格和层

回顾如何插入图片在网页中并设置它的宽度、高度和图片边框？ 如何插入图片在网页中并设置它的宽度、高度和图片边框？ <img src=“图片路径” width=“指定宽度” height=“指定高度” border=“指定边框宽度”> 在什么地方会用到锚记超链接，如何使用？ 在什么地方会用到锚记超链接，如何使用？ 在同一个网页中找到指定部分内容是用到锚记超链接。 使用超链接的地方用href=“#目标名称”,在目标位置用 name=“目标名称”来使用 有序列表和无序列表分别是什么标签，列表项放在哪个标签里面？ 有序列表和无序列表分别是什么标签，列表项放在哪个标签里面？ 有序列表<ol>;无序列表<ul>;列表项放在<li>里面

预习检查表格是哪个标签？行用哪个标签表示？列 用哪个标签表示？表格:<table>;行:<tr>;列:<td>;

rowspan和colspan属性分别表示什么？rowspan表示单元格跨行;colspan表示单元格跨列；

层是那个标签？层：<div>

本章任务制作个人简历。 用表格制作个人简历。

本章目标了解表格的作用 掌握表格的创建 掌握表格布局的方法 了解层的作用

为什么使用表格 – – –论坛中应用 表格 门户网站应 用表格

表格应用场合 论坛 门户网站 购物网站

购物网站 应用表格

什么是表格列

单元格 行

文档中，广泛使用表格 表格来存放网页上的文本和图像 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像

表格的基本语法border用来设置表 用来设置表 格边框尺寸大小 <TABLE border="1"> <TR> <TD> 单元格内容 </TD> …… </TR> ……

<TD>…</TD> 定义列

<TR>…</TR> 定义行

<TABLE>... </ TABLE > 定义表格

</TABLE>

如何创建表格

<TABLE border="2"> <TR> <TD>移动 移动</TD> 移动 <TD>联通 联通</TD> 联通 <TD>铁通 铁通</TD> 铁通 </TR> <TR> <TD>IBM </TD> <TD>惠普 惠普</TD> 惠普 <TD>华硕 华硕</TD> 华硕 </TR> </TABLE>

什么是跨行跨列的表格下图中的表格哪里用了跨行？哪里用了跨列？ 下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列? 跨了几行几列?

跨3列 列

跨3行 行

跨多行的表格rowspan =“n” 属性表示跨多少行？ 属性表示跨多少行？ <TABLE border="1"> <TR> <TD rowspan=“3” >早上菜谱 </TD> 早上菜谱 <TD >食物 食物</TD> 食物 <TD >鸡蛋 鸡蛋</TD> 鸡蛋 </TR> <TR> <TD >饮料 饮料</TD> 饮料 <TD >牛奶 牛奶</TD> 牛奶 </TR> <TR> <TD>甜点 甜点</TD> 甜点 <TD>开心粉 开心粉</TD> 开心粉 </TR> </TABLE>

如何创建跨行跨列的表格<TABLE border="1"> <TR> <TD>手机充值、IP卡 </TD> 手机充值、 卡 手机充值 <TD colspan="2">办公设备、文具 办公设备、 办公设备 文具</TD> </TR> <TR> <TD rowspan="2">各种卡的总

汇 各种卡的总汇</TD> 各种卡的总汇 <TD>铅笔 铅笔</TD> 铅笔 <TD>彩笔 彩笔</TD> 彩笔 </TR> <TR> <TD>打印 打印</TD> 打印 <TD>刻录 刻录</TD> 刻录 </TR> </TABLE>

如何设置对其方式<TABLE width="350" height="100" border="2" background="images/type_back.jpg" > <TR> align属性用来设置表 属性用来设置表 <TD colspan="4">&nbsp;</TD> 格、行、列的对齐方式 </TR> <TR bgcolor="#EBEFFF"> <TD colspan="2" align="center" >笔记本电脑</TD> >笔记本电脑 笔记本电脑</TD> <TD colspan="2" align="center" >办公设备、文具、耗材 办公设备、 办公设备 文具、耗材</TD> </TR> <TR bgcolor="#EBEFFF"> <TD >惠普 惠普</TD> 惠普 <TD >华硕 华硕</TD> 华硕 <TD >打印机 打印机</TD> 打印机 <TD >刻录盘 刻录盘</TD> 刻录盘 </TR> </TABLE>

小结1编写如下图所示效果对应的html代 码第一行第一个 格子跨了2行 格子跨了 行

此格子 跨了3列 跨了 列

什么是表格的美化修饰下面表格应该从哪些方面进行美化修饰？ 根据理解,下面表格应该从哪些方面进行美化修饰？

背景图片 背景色 表格的高度

文字对 齐方式 表格的宽度

如何设置表格的尺寸和边框width用来设置表格的宽度 用来设置表格的宽度 height用来设置表格的高度 用来设置表格的高度 border用来设置表 用来设置表 格边框尺寸大小

<TABLE width=“400” height=“200” border=“15” “ ” “ ” “ ” bordercolor="red"> <TR> bordercolor用来设 用来设 <TD colspan="4"> 品牌商城 品牌商城</TD> 置表格边框颜色 </TR> <TR> <TD colspan="2" >笔记本电脑 笔记本电脑</TD> 笔记本电脑 <TD colspan="2" >办公设备、文具、耗材 办公设备、 办公设备 文具、耗材</TD> </TR> <TR> <TD >惠普 惠普</TD> 惠普 <TD >华硕 华硕</TD> 华硕 <TD >打印机 打印机</TD> 打印机 <TD >刻录盘 刻录盘</TD> 刻录盘 </TR> </TABLE>

如何设置背景background属性用来设置表格的背景图片 属性用来设置表格的背景图片 <TABLE background=“images/type_back.jpg” width=“360" “ ” “ height="120" border="2" > bgcolor属性用来设置表格、行、列 属性用来设置表格、 属性用来设置表格 <TR> 的背景色。 的背景色。“#EBEFFF”是用 ”是用RGB <TD colspan="6">&nbsp;</TD> 表示的一种颜色值， 表示的一种颜色值，RGB指的是红 指的是红 </TR> 下图就是RGB颜色对照表 。 绿蓝 ，下图就是 颜色对照表 <TR bgcolor="#EBEFFF"> <TD colspan="3" >笔记本电脑 笔记本电脑</TD> 笔记本电脑 <TD colspan=“3” bgcolor="yellow" >办公设备、文具、耗材 办公设备、 “ ” 办公设备 文具、 </TD> </TR> …… </TABLE>

如何设置对齐方式<TABLE width="350" height="100" border="2" background="images/type_back.jpg" > <TR> align属性用来设置表 属性用来设置表 <TD colspan="4">&nbsp;</TD> 格、行、列的对齐方

式 </TR> <TR bgcolor="#EBEFFF"> <TD colspan="2" align="center" >笔记本电脑</TD> >笔记本电脑 笔记本电脑</TD> <TD colspan="2" align="center" >办公设备、文具、耗材 办公设备、 办公设备 文具、耗材</TD> </TR> <TR bgcolor="#EBEFFF"> <TD >惠普 惠普</TD> 惠普 <TD >华硕 华硕</TD> 华硕 <TD >打印机 打印机</TD> 打印机 <TD >刻录盘 刻录盘</TD> 刻录盘 </TR> </TABLE>

为什么要使用填充属性单元格里的内容太靠近边线，怎 么办？

未填充的效果， 未填充的效果，字与单元格边 框之间的距离靠得太近

本文来源：https://www.bwwdw.com/article/1gli.html