HTML使用表格显示数据

如何创建表格

<TABLE  border="2">

  <TR>

    <TD>移动</TD>

    <TD>联通</TD>

    <TD>铁通</TD>

  </TR>

<TR>

    <TD>IBM </TD>

    <TD>惠普</TD>

    <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>手机充值、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 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   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>

width用来设置表格的宽度

height用来设置表格的高度

border用来设置表格边框尺寸大小

bordercolor用来设置表格边框颜色

如何设置背景

<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>

background属性用来设置表格的背景图片

bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝 ，下图就是RGB颜色对照表 。

如何设置对其方式

align属性用来设置表格、行、列的对齐方式

<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 border="20" cellpadding="30" cellspacing="40" bordercolor="red">

……

</TABLE>

border(边框的厚度)

cellpadding(单元格填充)

cellspacing(单元格间距)

如何设置表格的填充属性

<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>

cellspacing属性用来设置表格内框宽度

cellpadding属性用来设置表格内填充距离

如何使用表格进行布局

<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>