tp-link2路由器配置说明书

设置的千变不离其宗

第二章表格基础

设置的千变不离其宗

回顾

HTML标签区分大小写吗? 标签区分大小写吗? 标签区分大小写吗 HTML的基本结构并说明各部分的含义. 的基本结构并说明各部分的含义. 的基本结构并说明各部分的含义 页面链接有几种?分别用在什么场合? 页面链接有几种?分别用在什么场合? 超链接的基本格式及其各部分的含义. 超链接的基本格式及其各部分的含义.

设置的千变不离其宗

预习检查

请叙述表格是由哪两部分组成? 请叙述表格是由哪两部分组成? 创建一个表格必须需要哪些标签? 创建一个表格必须需要哪些标签?

设置的千变不离其宗

本章任务制作"宝贝分类" 制作"宝贝分类"页面

制作"公告栏" 制作"公告栏"页面

设置的千变不离其宗

本章目标

会使用表格的基本结构实现简单表格 会使用表格相关标签实现跨行, 会使用表格相关标签实现跨行,跨列的复杂表格 会使用表格相关设置进行美化修饰

设置的千变不离其宗

为什么使用表格表格应用场合论坛 门户网站 购物网站论坛中应用 表格 门户网站应 用表格

购物网站 应用表格

设置的千变不离其宗

表格的基本结构 列

单元格 行

文档中,广泛使用表格 表格来存放网页上的文本和图像 在 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行 行

设置的千变不离其宗

跨多列的表格查看源代码COLSPAN="n" 属性表示跨多少列? 属性表示跨多少列? <TABLE border="2"> <TR> <TD colspan="3">学生成绩表 学生成绩表</TD> 学生成绩表 </TR> <TR> <TD >英语 英语</TD> 英语 <TD >数学</TD> >数学 数学</TD> <TD >语文 语文</TD> 语文 </TR> <TR> <TD>95</TD> <TD>98</TD> <TD>89</TD> </TR> </TABLE>

设置的千变不离其宗

跨多行的表格查看源代码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>

设置的千变不离其宗

小结1 小结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/qwqi.html