WEB技術の辞書・解説・使用例

TOP > HTML >  HTMLタグ辞典 >  <table>
<table>  テーブル  表  定番 

テーブル（表）を作成します。

TABLEの基本構造

<table>
<tr><th>ヘッダ1</th><th>ヘッダ2</th></tr>
<tr><td>データ1</td><td>データ2</td></tr>
<tr><td>データ3</td><td>データ4</td></tr>
</table>

パラメーター

border="n" …枠線の太さ。記述なしか0を指定すると枠線無しで表示。
bordercolor="色" …枠線の色。
bordercolordark="色" …立体的な枠線の暗い部分の色。
bordercolorlight="色" …立体的な枠線の明るい部分の色。
frame="frame" …各セルの上下左右の枠線について、表示する/しないを制御します。
　void：表示しない。（既定値）
　above：上側のみ。 | below：下側のみ。 | hsides：上下のみ。 | vsides：左右のみ。
　lhs：左側（Left Hand Side）のみ。 | rhs：右側（Right Hand Side）のみ。
　box：上下左右。 | border：上下左右。
rules="rules" …テーブルの内側の枠線を表示するルールを指定。
　none：表示しない。 | all：すべて。（既定値）
　groups：<thead>, <tbody>, <tfoot> で指定したグループの境界のみ。
　rows：横方向のみ。 | cols：縦方向のみ。

背景関連のパラメーター

background="url" …背景画像を指定。<tr>, <th>, <td> でも指定可能。
bgcolor="色" …背景色を指定。<tr>, <th>, <td> でも指定可能。

配置関連のパラメーター

align="align" …テーブルの表示位置を指定。
　　center：中央 | left：左端表示（既定値）| right：右端表示）
cellpadding="n" …セルの余白をピクセル単位で指定。
cellspacing="n" …内枠の太さを指定。0 を指定すると立体感の無い枠線。
height="n" …高さをピクセルまたはパーセンテージで指定。
hspace="n" …横方向の余白をピクセル単位で指定。
vspace="n" …縦方向の余白をピクセル単位で指定。
width="n" …横幅をピクセルまたはパーセンテージで指定。

サンプルソース

<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th bgcolor="skyblue" align="center">商品</th>
<th bgcolor="skyblue" align="center">売上</font></th>
<th bgcolor="skyblue" align="center">個数</th>
</tr>
<tr>
<td bgcolor="#F0F0F0" align="left" nowrap>パソコン</td>
<td bgcolor="#FFFFFF" align="right"valign="top" width="150">300,000円</td>
<td bgcolor="#FFFFFF" align="center" valign="top" width="100">3台</td>
</tr>
<tr>
<td bgcolor="#F0F0F0" align="left" nowrap>テレビ</td>
<td bgcolor="#FFFFFF" align="right" valign="top">200,000円</td>
<td bgcolor="#FFFFFF" align="center" valign="top">2台</td>
</tr>
<tr>
<td bgcolor="#F0F0F0" align="left" nowrap>冷蔵庫</td>
<td bgcolor="#FFFFFF" align="center" colspan="2">データなし</td>
</tr>
</table>

実行例

商品 売上 個数
パソコン 300,000円 3台
テレビ 200,000円 2台
冷蔵庫 データなし

使用例

<table border="0" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#F0F0F0" bordercolor="red" align="left">パソコン</td>
<td bgcolor="#FFFFFF" bordercolor="red" align="right">300,000円</td>
<td bgcolor="#FFFFFF" bordercolor="red" align="center">3台</td>
</tr>
</table>

パソコン 300,000円 3台

HTMLの一般属性

属性説明
class="～"クラス名を指定。使用例
id="～"IDを指定します。使用例
style="～"スタイルシートを直接記述。使用例
title="～"タイトルを指定します。
dir="ltr|rtl"文字の表示方向を指定。 ltr(左から右)、rtl(右から左)
lang="～"言語を指定。日本語の場合は"ja"