タグを覚えてみよう
（第２章 テーブル ）

[ テーブル ]

1) 基本形 (5-1-1) [ １個だけののテーブル( 基本形(1) ) ] 1個だけのテーブルを 作ってみました。 これさえ出来ればＯＫ あとは組み合わせるだけです。 <Table Border> <Tr><Td> 1個だけのテーブルを<Br> 作ってみました。<Br> これさえ出来ればＯＫ<Br> あとは組み合わせるだけです。 </Td></Tr> </Table> (ちょっとMemo) テーブル [ テーブル ] ■ cell（セル）を一括りにまとめる（テーブル） … <Table>〜</Table> ■ cell（セル）を縦方向に括る … <Tr>〜</Tr> ■ cell（セル） … <Td>〜</Td> (5-1-2) [ 横４×縦３のテーブル( 基本形(2) ) ] 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border><Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr><Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr><Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr></Table>

---

2) ちょっとだけ応用 (5-2-1) [ 横４×縦３のテーブル( 基本形(2)の外枠の太さを指定（今回は5px））] ＜Table Border="5"＞ 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border="5"> <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-2-2) [ 横４×縦３のテーブル( 基本形(2)の全ての枠の太さを指定（今回は5px））] ＜Table Border Cellspacing="5"＞ [ ※Cellspacing＝セルとセルの間の事] 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border Cellspacing="5"> <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-2-3) [ 横４×縦３のテーブル( 基本形(2)の枠内のマージンを指定（今回は10px））] ＜Table Border cellpadding="10"＞ [ ※枠内のマージン＝枠と中の文字などを見易くする為のスペース ] 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border cellpadding="10"> <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-2-4) [ 横４×縦３のテーブル( 基本形(2)のテーブルの全体の大きさを指定 （ 今回は１つのセルを約[80×80]に設定 ））] ＜Table Border Width="320" Height="240"＞ [ ※１つのセルが約[80×80]だからテーブルはWidth[横]が４倍で320、Height[縦]が３倍で240 ] 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border Width="320" Height="240" > <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-2-5) [ 横４×縦３のテーブル( 基本形(2)のテーブルの横位置を指定 ( 今回は中央 ））] ＜Table Border Align="Center" ＞ [ ※ Align="横位置" ] ["Left"＝"左" "Center"＝"中央" "Right"＝"右" に配置されます。] 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border Align="Center" > <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-2-6) [ 横４×縦３のテーブルで今までのテーブルタグを使った例 ] ＜Table Border ="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" ＞ [ ※ (5-2-1)〜(5-2-5)の全て] 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" > <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-2-7-1) [ (5-2-6)のテーブル全体に色を付ける ] ＜Table Border="5" Cellspacing="5" Cellpadding="10" Width="320" Height="240" Align="Center" BgColor="全体の色" ＞ [ ※ 今回は#cc66ff ] 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" BgColor="#cc66ff" > <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-2-7-2) [ (5-2-6)のテーブル全体に画像を貼り付ける ] ＜Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" Background="画像File(URL)"＞ [ ※ 今回はwp002.jpg ] 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" Background="image/wp002.jpg" > <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-2-7-3) [ (5-2-6)のテーブルの１ヶ所に色を付ける ] ＜Td BgColor="色" ＞ [ ※ 全て違う色を塗ってみました ] #ff0088 #ff22aa #ff44cc #ff66ee #0088ff #22aaff #44ccff #66eeff #88ff00 #aaff22 #ccff44 #eeff66 <Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" > <Tr> <Td BgColor="#ff0088">#ff0088</Td><Td BgColor="#ff22aa">#ff22aa</Td> <Td BgColor="#ff44cc">#ff44cc</Td><Td BgColor="#ff66ee">#ff66ee</Td> </Tr> <Tr> <Td BgColor="#0088ff">#0088ff</Td><Td BgColor="#22aaff">#22aaff</Td> <Td BgColor="#44ccff">#44ccff</Td><Td BgColor="#66eeff">#66eeff</Td> </Tr> <Tr> <Td BgColor="#88ff00">#88ff00</Td><Td BgColor="#aaff22">#aaff22</Td> <Td BgColor="#ccff44">#ccff44</Td><Td BgColor="#eeff66">#eeff66</Td> </Tr> </Table> (5-2-7-4) [ (5-2-6)のテーブルの枠の色を変える ] ＜Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" Bordercolor="枠の色"＞ [ ※ 今回は#cc66ff ] 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" Bordercolor="#cc66ff" > <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table>

---

3) タイトル、見出しを付けてみる (5-3-1) [ 横４×縦３のテーブル(5-2-6)にタイトルをつける ] [ タイトル ＜caption＞ ] （タイトル）横４×縦３のテーブル 1-1 2-1 3-1 4-1 1-2 2-2 3-2 4-2 1-3 2-3 3-3 4-3 <Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" > <Caption>（タイトル）横４×縦３のテーブル</Caption> <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-3-2) [ 更に見出しセルをつける ] [ 見出しセル ＜Th＞ ] （タイトル）横４×縦３のテーブル H／W 縦１ 縦２ 縦３ 縦４ 横１ 1-1 2-1 3-1 4-1 横２ 1-2 2-2 3-2 4-2 横３ 1-3 2-3 3-3 4-3 <Table Border="5" Cellspacing="5" cellpadding="10" Width="400" Height="320" Align="Center" > <Caption>（タイトル）横４×縦３のテーブル</Caption> <Tr> <Th>H／W</Th><Th>縦１</Th><Th>縦２</Th><Th>縦３</Th><Th>縦４</Th> </Tr> <Tr> <Th>横１</Th><Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Th>横２</Th><Td>1-2</Td><Td>2-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Th>横３</Th><Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table>

---

4) セル結合 (5-4-1) [ (5-2-6)のテーブルの横セルを結合 ] [ 横セル結合] ＜Td ColSpan="結合するセル数"＞ [ ※ ２行目の横セルを結合] 1-1 2-1 3-1 4-1 ２行目の横セルを結合 1-3 2-3 3-3 4-3 <Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" > <Tr> <Td>1-1</Td><Td>2-1</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td ColSpan="4">２行目の横セルを結合</Td></Tr> <Tr> <Td>1-3</Td><Td>2-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> (5-4-2) [ (5-2-6)のテーブルの縦セルを結合] [ 縦セル結合] ＜Td Rowspan="結合するセル数"＞ [ ※ ２列目の縦セルを結合] 1-1 ２列目の 縦セル結合 3-1 4-1 1-2 3-2 4-2 1-3 3-3 4-3 <Table Border="5" Cellspacing="5" cellpadding="10" Width="320" Height="240" Align="Center" > <Tr> <Td>1-1</Td><Td Rowspan="3">２列目の<Br>縦セル結合</Td><Td>3-1</Td><Td>4-1</Td> </Tr> <Tr> <Td>1-2</Td><Td>3-2</Td><Td>4-2</Td> </Tr> <Tr> <Td>1-3</Td><Td>3-3</Td><Td>4-3</Td> </Tr> </Table> テーブル 作成例 [ テーブル作成例 ] ■ 作成例 - 元素周期表 - ■ここをクリック■

---