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

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

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

Table Dataの略です。セル内容が｢データ｣となるデータセルを作成します。 セル内容が｢見出し｣の場合には、<TH>～</TH>を使用します。

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="color"
　枠線の色を指定。
background="url"
　背景画像を指定。<tr>, <th>, <td> でも指定可能です。
bgcolor="color"
　背景色を指定します。<tr>, <th>, <td> でも指定可能です。
align="align" テーブルの表示位置を指定します。
　center：中央表示 / left：左端表示（既定値）/ right：右端表示
cellpadding="n"
　枠線とセルの内容の間の隙間をピクセル単位で指定します。
cellspacing="n"
　内枠の太さを指定。0 を指定すると、立体感の無い枠線を表示します。
height="n"
　高さをピクセルまたはパーセンテージで指定。
width="n"
　横幅をピクセルまたはパーセンテージで指定。

使用例

<table border="0" 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" bordercolor="red" border="5" align="left" valign="top" border="1" nowrap="nowrap">パソコン</td>
<td bgcolor="#FFFFFF" bordercolor="red" border="5" align="right" valign="middle" width="150" height="100">300,000円</td>
<td bgcolor="#FFFFFF" bordercolor="red" border="5" align="center" valign="bottom" width="100" height="100">3台</td>
</tr>
<tr>
<td bgcolor="#F0F0F0" align="left" border="1" 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" border="5" align="left" valign="top" border="1" nowrap="nowrap">パソコン</td>
<td bgcolor="#FFFFFF" bordercolor="red" border="5" align="right" valign="middle" width="150" height="100">300,000円</td>
<td bgcolor="#FFFFFF" bordercolor="red" border="5" align="center" valign="bottom" width="100" height="100">3台</td>
</tr>
</table>

パソコン 300,000円 3台

HTMLの一般属性

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