1.テーブル（表）の基本



<table border>〜</table>　テーブルを表示させるタグ（枠あり）

<table>〜</table>　テーブルを表示させるタグ（枠なし）



<tr>〜</tr>　列を定義

<td>〜</td>　セルを構成



（例）

<table border>

<tr><td>内容１</td><td>内容２</td></tr>

<tr><td>内容３</td><td>内容４</td></tr>

</table>



（結果）



内容１
内容２

内容３
内容４

2.テーブルの見出し



<th>〜</th>　見出し(セル内の文字が太字になります)



（例）

<table border>

<tr><th>題目１</th><td>内容１</td>

<tr><th>題目２</th><td>内容２</td>

</table>



（結果）



題目１
内容１

題目２
内容２

3.テーブルの枠線サイズ



<table border cellspacing=数字>　枠線を大きく



（例）

<table border cellspacing=10>

<tr><td>内容１</td><td>内容２</td>

<tr><td>内容３</td><td>内容４</td>

</table>



（結果）



内容１
内容２

内容３
内容４

4.テーブルのマージン幅



<table border cellpadding=数字>　文字の間を大きく



（例）

<table border cellpadding=10 >

<tr><td>内容１</td><td>内容２</td>

<tr><td>内容３</td><td>内容４</td>

</table>



（結果）



内容１
内容２

内容３
内容４

5.テーブルの枠線を立体に



<table border=数字>　枠線を立体的に

border=0とすると枠線が非表示になる



（例）

<table border=5>

<tr><td>内容１</td><td>内容２</td>

<tr><td>内容３</td><td>内容４</td>

</table>



（結果）



内容１
内容２

内容３
内容４

6.テーブルの大きさ



<table border width=横幅 height=縦幅>　テーブルの大きさを変える

幅はピクセル数またはウインドウサイズに対する割合％



（例）

<table border width=300 height=100>

<tr><td>内容１</td><td>内容２</td>

<tr><td>内容３</td><td>内容４</td>

</table>



（結果）



内容１
内容２

内容３
内容４

7.テーブル中の文字位置



<td align="位置">テーブル中の文字横位置

位置　left：左　center：真ん中　right：右



（例）

<table border>

<tr><td width=100 align="center">内容１</td><td width=100 align="right">内容２</td>

<tr><td width=100 align="center">内容３</td><td  width=100 align="left">内容４</td>

</table>



（結果）



内容１
内容２

内容３
内容４





<td vlign="位置">テーブル中の文字縦位置

位置　top：上　middle：真ん中　bottom：下



（例）

<table border>

<tr><td height=80 valign="middle">内容１</td><td height=80 valign="top">内容２</td>

<tr><td height=80 valign="middle">内容３</td><td height=80 valign="bottom">内容４</td>

</table>



（結果）



内容１
内容２

内容３
内容４

8.テーブルの工夫(列・行をまたぐ)



<td rowspan=列数>　横列をまたぐ



（例）

<table border>

<tr><td rowspan=2>項目</td><td>内容１</td><td>内容２</td>

<tr><td>内容３</td><td>内容４</td>

</table>



（結果）



項目
内容１
内容２

内容３
内容４





<td colspan=列数>　縦列をまたぐ



（例）

<table border>

<tr><td colspan=3>項目　　</td>

<tr><td>内容１</td><td>内容２</td><td>内容３</td>

<tr><td>内容４</td><td>内容５</td><td>内容６</td>

</table>



（結果）



項目

内容１
内容２
内容３

内容４
内容５
内容６

9.テーブルの色



<td bgcolor="色">　セルに色をつける



（例）

<table border>

<tr><td bgcolor="red">内容１</td><td bgcolor="yellow">内容２</td>

<tr><td bgcolor="blue">内容３</td><td bgcolor="gray">内容４</td>

</table>



（結果）



内容１
内容２

内容３
内容４





<table border bordercolor="色"> 枠線の色



（例）

<table border bordercolor="red">

<tr><td>内容１</td><td>内容２</td></tr>

</table>



（結果）



内容１
内容２





<table border bordercolorlight="色">　枠線の明るい(LIGHT)部分の色を指定できる

<table border bordercolordark="色">　枠線の暗い(DARK)部分の色を指定できる



（例）

<table border bordercolorlight="yellow" bordercolordark="purple">

<tr><td>内容１</td><td>内容２</td></tr>

<tr><td>内容３</td><td>内容４</td></tr>

</table>

（結果）



内容１
内容２

内容３
内容４

10.テーブルの位置



<table border　align="位置">　テーブルの位置

位置　left：左　right:右



（例）

<table border　align="left">

<tr><td>内容１</td><td>内容２</td></tr>

<tr><td>内容３</td><td>内容４</td></tr>

</table>

枠は左に！<br>

枠は左に！



（結果）



内容１
内容２

内容３
内容４



枠は左に！


枠は左に！

11.テーブルのタイトル



<caption>〜</caption>　テーブルのタイトル

alignオプションで位置も指定できる（top：左　bottom:右）



（例）

<table border>

<caption>タイトル</caption>

<tr>

<td>内容１<br>内容２<br></td>

<td>内容３<br>内容４<br></td>

</tr>

</table>



（結果）



タイトル



内容１
内容２

内容３
内容４

12.テーブルの枠線工夫



<table frame="外側の枠線の種類">　表の外側の枠線

外側の枠線の種類

　void：枠なし 

　hsides：上下枠のみ 

　above：上枠のみ 

　below：下枠のみ 

　vsides：左右枠のみ 

　lhs：左枠のみ 

　rhs：右枠のみ 

　box：４辺全て表示（標準） 



（例）

<table border frame="vsides">

<tr><td>内容１　</td><td>内容２　</td>;<td>内容３　</td></tr>

<tr><td>内容４　</td><td>内容５　</td>;<td>内容６　</td></tr>

</table>



（結果）



内容１　
内容２　
内容３　

内容４　
内容５　
内容６　







<table rules="内側の枠線の種類">  表の内側の枠線

内側の枠線の種類

　none：枠なし 

　all：全ての罫線 

　rows：行間に罫線 

　cols：列間に罫線 



（例）

<table border rules="rows">

<tr><td>内容１　</td><td>内容２　</td>;<td>内容３　</td></tr>

<tr><td>内容４　</td><td>内容５　</td>;<td>内容６　</td></tr>

</table>



（結果）



内容１　
内容２　
内容３　

内容４　
内容５　
内容６