テーブルタグ

<Table><Tr><Td> 
表を作る

テーブルの基本(1×1のテーブル)
<Table Border>
<Tr>
<Td>

ここに文字やデータを入れこみます。<Br>
テーブルタグはこれが基本です。
</Td>
</Tr>
</Table>


ここに文字やデータを入れこみます。
テーブルタグはこれが基本です。

テーブルの基本(3×3のテーブル)
<Table Border>
<Tr>
<Td>
1列1行</Td><Td>2列1行</Td><Td>3列1行</Td> </Tr>
<Tr>
<Td>
1列2行</Td><Td>2列2行</Td><Td>3列2行</Td> </Tr>
</Table>

1列1行 2列1行 3列1行
1列2行 2列2行 3列2行

  • <Table border="太さ"> 
    外枠の太さを指定


<Table Border="10">

1列1行 2列1行 3列1行
1列2行 2列2行 3列2行
1列3行 2列3行 3列3行


<Table Border="1">

1列1行 2列1行 3列1行
1列2行 2列2行 3列2行
1列3行 2列3行 3列3行



<Table Border="0">

1列1行 2列1行 3列1行
1列2行 2列2行 3列2行
1列3行 2列3行 3列3行
  • <Table cellspacing="枠の太さ"> 
    すべての枠の太さを指定
テーブル全体の大きさを決める
<Table Border Cellspacing="セルとセルの間">

 
<Table Border Cellspacing="1">


 
<Table Border Cellspacing="0">
線に色をつけると

 
<Table Border Bordercolor="#000080" Cellspacing="1">


 
<Table Border Bordercolor="#000080" Cellspacing="0">

<Table cellpadding="文字と枠の間"> 
枠内の余白を指定

Cellpaddingとは?

文字と回りの枠の間の事です。

文字
<Table Border cellpadding="0">

文字
<Table Border cellpadding="5">

文字

  • <Table width="横" height="縦"> 
    表の大きさを指定

テーブル全体の大きさを決める
<Table Border Width="150" Height="150">
<Table Width="横幅" Height="縦幅">
<Tr>
<Td>

150×150
</Td>
</Tr>
</Table>


150×150
※大きさは%でも指定可

<Table align="位置"> 
表の位置を指定

テーブルの位置を指定する <Table align="横位置">
<Table align="横位置">
<Tr>
<Td>
 
</Td>
</Tr>
</Table>

left
  • Alignは、LeftCenterRightで指定できます。

<caption> 
表にタイトルをつける

テーブル題名 <Caption>〜</Caption>
表のタイトル
     
     

<Table Border>
<Caption>表のタイトル</Caption>
<Tr>
<Td></Td><Td></Td><Td></Td>
</Tr>
<Tr>
<Td></Td><Td></Td><Td></Td>
</Tr>
</Table>

<Th> 
見出しセル

見出しセル <Table Border><Th>〜
使い方は<Td>と同じです。
見出しにしたいセルに使い
使うと中の文字は強調されます。

<Td rowspan=""><Td colspan=""> 
セルの結合

横のセルと結合する
<Td Colspan="結合するセル数">
横3セルと結合
1列2行 2列2行 3列2行

<Table Border>
<Tr>
<Td ColSpan="3">
横3セルと結合</Td>
</Tr>
<Tr>
<Td>
1列2行</Td><Td>2列2行</Td><Td>3列2行</Td>
</Tr>
</Table>

縦のセルと接合する
<Td Rowspan="結合するセル数">
縦3セルと結合 2列1行
2列2行
2列3行

<Table Border>
<Tr>
<Td RowSpan="3">
縦3セルと結合</Td>
<Td>
2列1行</Td>
</Tr>
<Tr>
<Td>
2列2行</Td>
</Tr>
<Tr>
<Td>
2列3行</Td>
</Tr>
</Table>


<Td align="横位置" valign="縦位置"> 
テキストの位置を細かく指定

テキストの位置を細かく指定
<Td Align="横位置" Valign="縦位置">〜<Td>
Align・・・・left(左),center(中央),right(右)
Valign・・・・top(上),middle(中央),bottom(下)

<Td Align="横位置">
left center right


<Td Valign="縦位置">
top middle bottom


<Td Align="横位置" Valign="縦位置">
left + top center + middle right + bottom

<Td bgcolor="色"> 
表内に色をつける

テーブル全体に色を付ける。
<Table Border Bgcolor="背景の色">
   
   

<Table Border BgColor="#d5eaff">
<Tr>
<Td></Td><Td></Td>
</Tr>
<Tr>
<Td></Td><Td></Td>
</Tr>
</Table>


セルごとに色を付ける。
<Td Bgcolor="セルの背景の色">
   
   

<Table Border>
<Tr>
<Td BgColor="#ffd5ea"></Td><Td BgColor="#d5eaff"></Td>
</Tr>
<Tr>
<Td BgColor="#ead5ff"></Td><Td BgColor="#ffffd5"></Td>
</Tr>
</Table>

行ごとに色を付ける。
<Tr Bgcolor="行の背景の色">
   
   

<Table Border>
<Tr BgColor="#d5eaff">
<Td></Td><Td></Td>
</Tr>
<Tr BgColor="#ffffd5">
<Td></Td><Td></Td>
</Tr>
</Table>

背景を表示する
<Table Border Background="画像URL">
     
     

<Table Border Background="tree_a2.gif">
<Tr>
<Td></Td><Td></Td><Td></Td>
</Tr>
<Tr>
<Td></Td><Td></Td><Td></Td>
</Tr>
</Table>

<Table bordercolor="色"> 
枠線の色

<Table Border Bordercolor="枠の色">
     
     

<Table Border BorderColor="#0070ff">
<Tr>
<Td></Td><Td></Td><Td></Td>
</Tr>
<Tr>
<Td></Td><Td></Td><Td></Td>
</Tr>
</Table>

<Table Border Cellspacing="0" Bordercolor="枠の色">

     
     

<Table Border Cellspacing="0" BorderColor="#0070ff">
<Tr>
<Td></Td><Td></Td><Td></Td>
</Tr>
<Tr>
<Td></Td><Td></Td><Td></Td>
</Tr>
</Table>


※ブラウザによっては表現できません