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">&nbsp;</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">&nbsp;</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">&nbsp;</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">