表格"/>
chapter2 表格
回顾
· HTML标签区分大小写吗？
· HTML的基本结构并说明各部分的含义。
· 页面链接有几种？分别用在什么场合？
超链接的基本格式及其各部分的含义。
预习检查
· 请叙述表格是由哪两部分组成？
创建一个表格必须需要使用哪些标签？
本章任务
本章目标
· 会使用表格的基本结构实现简单表格
· 会使用表格相关标签实现跨行、跨列的复杂表格
· 会使用表格相关设置进行美化修饰
为什么使用表格
· 表格应用场合
· 论坛
· 门户网站
· 购物网站
表格的基本结构
表格的基本语法
<TABLE border="1">
<TR>
<TD>
单元格内容
</TD>
……
</TR>
……
</TABLE>
如何创建表格
什么是跨行跨列的表格
下图中的表格哪里用了跨行？哪里用了跨列？
跨了几行几列?
<TABLE border="2">
<TR>
<TD colspan="3">学生成绩表</TD>
</TR>
<TR>
<TD >英语</TD>
<TD >数学</TD>
<TD >语文</TD>
</TR>
<TR>
<TD>95</TD>
<TD>98</TD>
<TD>89</TD>
</TR>
</TABLE>
<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=“400" height=“200” border="15" bordercolor="red">
<TR>
<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>
如何设置背景
<TABLE background="images/type_back.jpg" width="360" height="120" border="2" >
<TR>
<TD colspan="6"> </TD>
</TR>
<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>
<TD colspan="4"> </TD>
</TR>
<TR bgcolor="#EBEFFF">
<TD colspan="2" align="center" >笔记本电脑</TD>
<TD colspan="2" align="center" >办公设备、文具、耗材</TD>
</TR>
<TR bgcolor="#EBEFFF">
<TD >惠普</TD>
<TD >华硕</TD>
<TD >打印机</TD>
<TD >刻录盘</TD>
</TR>
</TABLE>
为什么要使用填充属性
单元格里的内容太靠近边线，怎么办？
什么是填充属性和间距属性
如何使用填充、间距属性
如何设置表格的填充属性
<TABLE cellspacing="5 " cellpadding="10 " border="1" background="images/type_back.jpg" >
<TR>
<TD colspan="6"> </TD>
</TR>
<TR bgcolor="#EBEFFF">
<TD colspan="3" align="center" >笔记本电脑</TD>
<TD colspan="3" align="center" >办公设备、文具、耗材</TD>
</TR>
….
</TABLE>
什么是表格布局
<TABLE width="298">
<TR>
<TD colspan="2"><IMG src="images/adv.jpg" /></TD>
</TR>
<TR>
<TD width= " 122 " rowspan= " 6 " align= " left " ><IMG
src="images/wangyou.jpg" width="116" height="142" /></TD>
<TD width=“285” >
<A href= " # " >超值变形金钢2.5折!</A>
</TD>
</TR>
<TR>
<TD><A href="#">人们为啥对电视吼叫</A></TD>
</TR>
……
</TABLE>
总结
· 创建表格最少需要那三个标签？
· 简述表格的基本结构。
· 跨行跨列的表格，主要在什么情况下使用？
给你一个表格，你会从哪些方面进行美化？
<td colspan="2"> 一个单元格对应2列
<td rowspan="3"> 一个单元格对应3行
<strong> 字体加粗 font-style: italic 字体斜体
边框线长默认灰黑 单元格间隔 最小内容间隔 背景图
<table width="550" border="5" cellspacing="5" cellpadding="10 " background="../images/chapter2/background.jpg">
更多推荐
chapter2 表格
发布评论