テーブル <TABLE>

HOME > HTML > テーブル <TABLE>


タグ 属性 サポート
<TABLE>
border="n"
bordercolor="color"
bordercolordark="color"
bordercolorlight="color"
cellpadding="n"
cellspacing="n"
height="n"
width="n"
align="*"
bgcolor="color"
background="url"
e2〜N2〜H3〜
e2〜N2〜H3〜
e2〜N4
e2
e2
e2〜N2〜H3〜
e2〜N2〜H3〜
e2〜N2〜
e2〜N2〜H3〜
e2〜N2〜H3〜
e2〜N3〜H4〜
e2〜N4

■ 説明

<table>は、<tr><td>などと組み合わせて使用します。<table>から</table>で囲まれた部分が一つのテーブル(表)になります。

■ 記述 <table>〜<table>

<table>
<tr>
<td>あいうえお</td>
</tr>
</table>

■ 表示結果

この状態ではテーブルは表示されません。

あいうえお
■ 枠線を指定 border

■ 説明

<table>タグのborderは、枠線を指定する属性があります。属性値はピクセルで指定します。bordercolorは、その枠線の色を指定する属性があります。属性値には16進数やカラーネームを使います。

Internet Explorerのみですが、枠線の「明るい部分と暗い部分」の色の指定できます。

■ 記述
<table border="属性値">〜<table>
<table bordercolor="color">〜<table>

<table border="5" bordercolor="0000FF"
bordercolordark="
FFFF00"
bordercolorlight="
FF0000">
<tr>
<td>あいうえお</td>
</tr>
</table>

■ 表示結果

Internet Explorerは黄色と赤で表示されます。Netscapeは青で表示されます。

Internet Explorer表示
あいうえお

Netscape表示
あいうえお

■ セルの枠線変更の場合

tableではなく<td>で変更します。

<table>
<tr>
<td border="5" bordercolor="0000FF"
bordercolordark="
FFFF00"
bordercolorlight="
FF0000">あいうえお</td>
</tr>
</table>
■ テーブルと内容(セル)の隙間 cllpadding

■ 説明

<table>タグのcellpaddingは、テーブルと内容(セル)の隙間を指定する属性があります。属性値にはピクセルで指定し、0にすると隙間がなくなります。

■ 記述 <table cellpadding="*">〜</table>

<table border="1"cellpadding="20">
<tr>
<td>あいうえお</td>
</tr>
</table>

■ 表示結果

あいうえお
■ 内線を指定 cellspacing

■ 説明

<table>タグのcellspacingは、内側の線を指定する属性があります。属性値にはピクセルで指定でき、枠線の立体感をなくすには「0」を指定します。

■ 記述<table cellspacing="*">〜</table>

<table border="1"cellspacing="0">
<tr>
<td>あいうえお</td>
</tr>
</table>

■ 表示結果

あいうえお
■ サイズを指定 height、width

■ 説明

<table>タグの、heightとwidthはテーブルの大きさを指定する属性があります。属性値にはページに対する%またはピクセルで指定できます。

■ 記述 <table width="*" height="*">

<table border="1" width="100" height="100">
<tr>
<td>あいうえお</td>
</tr>
</table>

■ 表示結果

あいうえお
■ 配置を指定 align

■ 説明

<table>タグのalignはテーブルの配置を指定する属性があります。これを指定しない場合は通常の位置(左寄せ:left)になります。

■ 記述 <table align=*">〜</table>

<table border="1" align="center">
<tr>
<td>あいうえお</td>
</tr>
</table>

■ 表示結果

あいうえお
■ 列や行の追加

■ 説明

<tr>〜</tr>の間が1行になります。そして<td>〜</td>が列になります。

■ 記述

2行にするには

<table border="1">
<tr>
<td>1行目</td>
</tr>

<tr>
<td>2行目</td>
</tr>

</table>

2列にするには

<table border="1">
<tr>
<td>1列目</td><td>2列目</td>
</tr>
</table>

2列で2行の場合

<table border="1">
<tr>
<td>1</td><td>2</td>
</tr>

<tr>
<td>3</td><td>4</td>
</tr>

</table>

■ 表示結果

12
34
■ 連結

■ 列や行の連結

<td>の属性の、colspanとrowspanを使用します。

■ 記述 <td colspan="n"rowspan="n">

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">横に連結</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td rowspan="2">縦に連結</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

■ 表示結果

横に連結  
      縦に連結
     
■ 背景を指定 bgcolor、background

■ 説明

bgcolorは背景色を指定する属性があります。属性値には16進数やカラーネームを使います。

backgroundは背景に画像を使う属性があります。属性値にはURLを記述します。URLはフルパスまたは相対パスで指定できます。

■ 記述
<table bgcolor="color">〜</table>
<table background="URL">〜</table>

<table border="1" cellpadding="20" bgcolor="ffff00">
<tr>
<td>背景色の変更</td>
</tr>
</table>
<br><br>
<table border="1" cellpadding="20" background="aaa.gif">
<tr>
<td>背景に画像</td>
</tr>
</table>

■ 表示結果

背景色の変更


背景に画像

■ セルの背景を変更

テーブル(全体を囲む)とセル(表示する)なので、テーブルとセルの背景は別に指定できます。この場合は<td>の背景を変更すればよいです。画像も使えます。

■ 記述
<td bgcolor="color">〜</td>
<td background="URL">〜</td>

<table border="1" cellpadding="20">
<tr>
<td bgcolor="ffff00">1</td><td>2</td>
</tr>
<tr>
<td>3</td><td bgcolor="ff0000">4</td>
</tr>
</table>

■ 表示結果

12
34

■ 関連タグ

<tr> <td> <th> <caption>


[HOME]