| テーブル <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のみですが、枠線の「明るい部分と暗い部分」の色の指定できます。
- bordercolordark=暗い部分
- bordercolorlight=明るい部分
■ 記述
<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はテーブルの大きさを指定する属性があります。属性値にはページに対する％またはピクセルで指定できます。
- height=高さ
- width=横幅
■ 記述 <table width="*" height="*">
<table border="1" width="100" height="100">
<tr>
<td>あいうえお</td>
</tr>
</table>■ 表示結果
あいうえお
| ■ 配置を指定 align |
■ 説明
<table>タグのalignはテーブルの配置を指定する属性があります。これを指定しない場合は通常の位置（左寄せ：left）になります。
- center=中央表示
- left=左寄せ
- right=右寄せ
■ 記述 <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>■ 表示結果
1 2 3 4
| ■ 連結 |
■ 列や行の連結
<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>■ 表示結果
1 2 3 4 ■ 関連タグ
[HOME]