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>