3-2 表格 (Tables)

HTML b̪]pɡAèSҼ{짹ƪ\A]Yn HTML iKνƪANna]Tables^ӹFC@²檺dҦpUG

Example]table01.htm^G

WzdҪlɦpUG

lɡ]table01.htm^G]ǦϰUYi^
<HTML>
<HEAD>    
	<TITLE> G򥻪 </TITLE>
</HEAD>
<BODY>

<table border=1>
<tr>
<td> 1 CB 1 </td>
<td> 1 CB 2 </td>
<td> 1 CB 3 </td>
</tr>
<tr>
<td> 2 CB 1 </td>
<td> 2 CB 2 </td>
<td> 2 CB 3 </td>
</tr>
</table>

</BODY>
</HTML>

䤤 tr N table rowAtd N table dataA border=1 hNɪe׬O@ӹ]Pixel^C

Hint
q`ڭ̥HuCvNuCvAuvNuvC

榳\hݩʡAҦpG

Example]table02.htm^G

WzdҪlɦpUG

lɡ]table02.htm^G]ǦϰUYi^
<HTML>
<HEAD>    
	<TITLE> G]w檺ݩ </TITLE>
</HEAD>
<BODY>

<table border=4 align=center width=60% bgcolor=yellow cellspacing=5 cellpadding=6>
<tr>
<td> 1 CB 1 </td>
<td> 1 CB 2 </td>
<td> 1 CB 3 </td>
</tr>
<tr>
<td> 2 CB 1 </td>
<td> 2 CB 2 </td>
<td> 2 CB 3 </td>
</tr>
</table>

</BODY>
</HTML>

oǪ檺ݩʡAipUG

borderBcellspacingBcellpadding oTݩʡAiѤUCϥܨAѡG

ڭ̤]iHϥ <caption> ҨӬ[WDAå <table> Ҫ align ݩʳ]waξakA ҦpG

Example]table03.htm^G

WzdҪlɦpUG

lɡ]table03.htm^G]ǦϰUYi^
<HTML>
<HEAD>    
	<TITLE> G]w檺D </TITLE>
</HEAD>
<BODY>

<table align=left border=3>
<caption align="top">DbWAa</caption>
<tr>
<td> 1 CB 1 </td>
<td> 1 CB 2 </td>
</tr>
<tr>
<td> 2 CB 1 </td>
<td> 2 CB 2 </td>
</tr>
</table>

<table align=right border=3>
<caption align="bottom">DbUAak</caption>
<tr>
<td> 1 CB 1 </td>
<td> 1 CB 2 </td>
</tr>
<tr>
<td> 2 CB 1 </td>
<td> 2 CB 2 </td>
</tr>
</table>

</BODY>
</HTML>

b <td> ҤAڭ̥iHϥ colspan rowspan ݩʡAӦXּƭxsAҦpG ڭ̤]iHϥ <caption> ҨӬ[WDAҦpG

Example]table04.htm^G

WzdҪlɦpUG

lɡ]table04.htm^G]ǦϰUYi^
<HTML>
<HEAD>    
	<TITLE> GXּƭxs </TITLE>
</HEAD>
<BODY>

<table BORDER="2" align=center>
<caption>DGXxs</caption>
<tr>
	<td>1</td>
	<td rowspan="2">WU<br>X@</td>
	<td>3</td>
</tr>
<tr>
	<td>4</td>
	<td>6</td>
</tr>
<tr>
	<td colspan=3>kTX@</td></tr>
</table>

</BODY>
</HTML>

]AQΤWzUإ\Aڭ̴NiHܤKasXӤHҵ{AҦpG

Example]tableSchedule01.htm^G

WzdҪlɦpUG

lɡ]tableSchedule01.htm^G]ǦϰUYi^
<HTML>
<HEAD>
    <TITLE> TABLE dҵ{ </TITLE>
</HEAD>

<BODY>
<CENTER>
<TABLE BORDER=3 CELLPADDING=3>
<CAPTION>Ҫ</CAPTION>
<TR>
<TH>@@P<BR>ɶ@@<TH>@<TH>G<TH>;T<TH>|<TH><TH>
<TR>
<TH>8:20<BR>|<BR>9:10
<TD>@@<BR>@@<BR>@@@
<TD>@@<BR>@@<BR>@@@
<TD ROWSPAN=2 ALIGN=CENTER><BR>
<TD>@@<BR>@@<BR>@@@
<TD ROWSPAN=2 ALIGN=CENTER><BR>
<TD ROWSPAN=3 ALIGN=CENTER>@~<BR>t
<TR>
<TH>9:15<BR>|<BR>10:05
<TD>@@<BR>@@<BR>@@@
<TD ROWSPAN=3 ALIGN=CENTER><BR>{<BR>]p
<TD>@@<BR>@@<BR>@@@
<TR>
<TH>10:15<BR>|<BR>11:05
<TD ALIGN=CENTER><BR>
<TD>@@<BR>@@<BR>@@@
<TD>@@<BR>@@<BR>@@@
<TD>@@<BR>@@<BR>@@@
<TR>
<TH>11:10<BR>|<BR>12:00
<TD ALIGN=CENTER><BR>
<TD>@@<BR>@@<BR>@@@
<TD>@@<BR>@@<BR>@@@
<TD>@@<BR>@@<BR>@@@
<TD>@@<BR>@@<BR>@@@
</TABLE>
</CENTER>

</BODY>
</HTML>

]iHb[JIϩέI֡AάObCxs[WAHKYSwάOSwCơAҦpG

Example]tableSchedule02.htm^G

WzdҪlɦpUG

lɡ]tableSchedule02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
<title>Weekly Schedule of Roger</title>
<style> td {font-family: "з", "helvetica,arial", "Tahoma";}</style>
</head>

<body background="multimedia/paper.jpg">
<center>
<h3>
<font size=+2>W</font>EEKLY
<font size=+2>S</font>CHEDULE:
<font size=+2>F</font>all 2001
</h3>
<address>
<a href="/jang">iP (Jyh-Shing Roger Jang)</a>
</address>
</center>

<p>
<center>
  <table border=4>
    <tr align=center bgcolor="cyan">
       <td width=100 bgcolor="gray"><br></td>
       <td width=100>Mon.&nbsp;</td>
       <td width=100>Tue.&nbsp;</td>
       <td width=100>Wed.&nbsp;</td>
       <td width=100>Thu.&nbsp;</td>
       <td width=100>Fri.&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>8:00~8:50</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>9:00~9:50</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>TBzP (224)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>TBzP (224)&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>10:10~11:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>ƾ (132)&nbsp;</td>
       <td width=100>T&nbsp;</td>
       <td width=100>TBzP (224)&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>11:10~12:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>ƾ (132)&nbsp;</td>
       <td width=100>ʶv&nbsp;</td>
       <td width=100>ƾ (132)&nbsp;</td>
    <tr align=center bgcolor=yellow>
       <td width=100 bgcolor=white>12:00~13:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>13:10~14:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>ô&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>MIR meeting (447)&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>14:10~15:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>MIR meeting (447)&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>15:10~16:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>tȷ|ij (447)</td>
       <td width=100>g&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>16:10~17:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>ȪQ&nbsp;</td>
       <td width=100>tȷ|ij (447)</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>17:10~18:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>F&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>18:10~19:00</td>
       <td width=100>&nbsp;</td>
       <td width=100>yX|ij]739^&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>19:10~20:00</td>
       <td width=100>&nbsp;</td>
       <td width=100>yX|ij]739^&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>20:10~21:00</td>
       <td width=100>y<br>(Ǥy)&nbsp;</td>
       <td width=100>&nbsp</td>
       <td width=100>&nbsp;</td>
       <td width=100>y<br>(Ǥy)&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>21:10~22:00</td>
       <td width=100>y<br>(Ǥy)&nbsp;</td>
       <td width=100>&nbsp</td>
       <td width=100>&nbsp;</td>
       <td width=100>y<br>(Ǥy)&nbsp;</td>
       <td width=100>&nbsp;</td>
  </table>
</center>

<hr>
<script language="JavaScript">
document.write("Last updated on " + document.lastModified + ".")
</script>

</body>
</html>

A]iHsۤviAҦpG

Example]tableResume.htm^G

WzdҪlɦpUG

lɡ]tableResume.htm^G]ǦϰUYi^
<html>
<head>
    <title> TABLE dҵ{ </title>
</head>
   <center>
<table BORDER="5">
<caption><big>i@@@@<big></caption>
<tr><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60">
<tr><td COLSPAN="3">mW: ð<td COLSPAN="3">ʧO: kk<td COLSPAN="2" ROWSPAN="3"><img SRC="multimedia/CAT-WALKING-KITY.GIF" WIDTH="112" HEIGHT="115">
<tr><td COLSPAN="6">: xxxxxxxxxx
<tr><td COLSPAN="6">}: xxxxxxxxxxxxxxxxxxxxxx
<tr>
<td COLSPAN="4">
M:<br>
<ul>
<li>kܤk
<li>kܨk
<li>ܾeJkC200r
</ul>
<td COLSPAN="4">
g:<br>
<ul>
<li>xxuӱMդu
<li>xxutgz
<li>xxqƪ
</u>
</table>
</center>
</body>
</html>

A]iHϥέIC⪺ޥAӲ͸쪺vĪGG

Example]tableShadow.htm^G

WzdҪlɦpUG

lɡ]tableShadow.htm^G]ǦϰUYi^
<html>
<body>

border=0 G
<table border=0 cellspacing=0 cellpadding=2 align=center>
<tr>
<td width=3 height=5 bgcolor=blue><td bgcolor=blue><td width=3>
<tr>
<td bgcolor=blue><td bgcolor=blue><font color=white size=6>v϶</font><td bgcolor=gray>
<tr>
<td height=5><td bgcolor=gray><td bgcolor=gray>
</table>

border=1 G
<table border=1 cellspacing=0 cellpadding=2 align=center>
<tr>
<td width=3 height=5 bgcolor=blue><td bgcolor=blue><td width=3>
<tr>
<td bgcolor=blue><td bgcolor=blue><font color=white size=6>v϶</font><td bgcolor=gray>
<tr>
<td height=5><td bgcolor=gray><td bgcolor=gray>
</table>

</body>
</html>

Hint
bWzdҤAڭ̥unN border ]w 1ANiHܧ֬ݥXӭ檺xsAoӤk`QΦbϸѡ]reverse engineering^OHƪޥC

YnϪ沣ͥbzICANna CSSAdҦpUG

Example]tableTransparentBgColor01.htm^G

WzdҪlɦpUG

lɡ]tableTransparentBgColor01.htm^G]ǦϰUYi^
<html>
<head>    
<title>G]wbzIC</title>
<style>
table{filter:Alpha(Opacity=60, FinishOpacity=60, Style=1)}
</style>
</head>
<body background="multimedia/bio_back.jpg">

<p>ϥ table{filter:Alpha(Opacity=60, FinishOpacity=60, Style=1)}AҥHiwe{bzICG<br>
<table border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td> 1 CB 1 <td> 1 CB 2 <td> 1 CB 3 </td>
<tr><td> 2 CB 1 <td> 2 CB 2 <td> 2 CB 3 </td>
<tr><td> 3 CB 1 <td> 3 CB 2 <td> 3 CB 3 </td>
</table>
<p>
<table align=center width=60% bgcolor=#98AFDE>
<tr><td align=center>This is the text within a table!
</table>

</body>
</html>

bWzdҤAڭ̧QΤUcssykiHXz檺ĪG

table{filter:Alpha(Opacity=X, FinishOpacity=Y, Style=Z)} X = 0 ~ 100 Hƶ}lz (ƦrVV) Y = 0 ~ 100 HƵz (ƦrVV) Z = 1 ~ 3 Hƪ覡 YnӧOC@Ӫ沣ͤP]wbzIϡAiN CSS O[bC@ӪAҦpG

Example]tableTransparentBgColor02.htm^G

WzdҪlɦpUG

lɡ]tableTransparentBgColor02.htm^G]ǦϰUYi^
<html>
<head>    
<title>G]wbzIC</title>
</head>
<body background="multimedia/bio_back.jpg">

<p>ϥ style="filter:Alpha(Opacity=60, FinishOpacity=60, Style=1)"G<br>
<table style="filter:Alpha(Opacity=60, FinishOpacity=60, Style=1)" border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td> 1 CB 1 <td> 1 CB 2 <td> 1 CB 3 </td>
<tr><td> 2 CB 1 <td> 2 CB 2 <td> 2 CB 3 </td>
<tr><td> 3 CB 1 <td> 3 CB 2 <td> 3 CB 3 </td>
</table>

<p>ϥ style="filter:Alpha(Opacity=80, FinishOpacity=20, Style=1)"G<br>
<table style="filter:Alpha(Opacity=80, FinishOpacity=20, Style=1)" border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td> 1 CB 1 <td> 1 CB 2 <td> 1 CB 3 </td>
<tr><td> 2 CB 1 <td> 2 CB 2 <td> 2 CB 3 </td>
<tr><td> 3 CB 1 <td> 3 CB 2 <td> 3 CB 3 </td>
</table>

<p>ϥ style="filter:Alpha(Opacity=20, FinishOpacity=80, Style=1)"G<br>
<table style="filter:Alpha(Opacity=20, FinishOpacity=80, Style=1)" border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td> 1 CB 1 <td> 1 CB 2 <td> 1 CB 3 </td>
<tr><td> 2 CB 1 <td> 2 CB 2 <td> 2 CB 3 </td>
<tr><td> 3 CB 1 <td> 3 CB 2 <td> 3 CB 3 </td>
</table>

<p>ϥ style="filter:Alpha(Opacity=20, FinishOpacity=80, Style=2)"G<br>
<table style="filter:Alpha(Opacity=20, FinishOpacity=80, Style=2)" border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td> 1 CB 1 <td> 1 CB 2 <td> 1 CB 3 </td>
<tr><td> 2 CB 1 <td> 2 CB 2 <td> 2 CB 3 </td>
<tr><td> 3 CB 1 <td> 3 CB 2 <td> 3 CB 3 </td>
</table>

</body>
</html>

HUOϡAAiHJ HTML eAueXաvAYibsݨe{GC

Example]htmlTestTable.htm^G


HTML ²P