<TD>テーブルのセルを表示

基本的なテーブル(表)は<TABLE><TR>、<TD>タグで作ります。

<TD>とは「Table Data」の略称で、見出しではなくデータが入っているセルの場合は<TD>~</TD>で囲みます。 テーブル(表)内で見出しとなるセルについては<TH>~</TH>で囲み、各セルを横1列分ずつ<TR>~</TR>で囲みます。 さらにその全体を<TABLE>~</TABLE>で囲むことで、テーブル(表)を作成することができます。

なお<TH>や<TD>といったセル、テーブル(表)全体の枠線についてはtable要素のborder属性で表示・非表示、または外枠線の太さなどを指定することができます。

使用した時の例

テーブルの全体構造(図)
<table border="2">
  <tr>
     <th>名前</th>
     <th>産地</th>
     <th>価格</th>
  </tr>
  <tr>
     <td>みかん</td>
     <td>和歌山産</td>
     <td>8,000円</td>
  </tr>
  <tr>
     <td>サクランボ</td>
     <td>長野県産</td>
     <td>4,000円</td>
  </tr>
</table>

ブラウザ上の表示例

名前 産地 価格
みかん 和歌山産 8,000円
サクランボ 長野県産 4,000円

属性

セルの連結
colspan="数値" セルを横方向に連結
rowspan="数値" セルを縦方向に連結
headers="" 関連する見出しセルをid属性で指定
枠線の色
bordercolor="" 枠線全体の色を指定
bordercolorlight="" 左と上の枠線の色を指定
bordercolordark="" 右と下の枠線の色を指定
背景
background="画像url" 背景画像の指定
bgcolor="" 背景色の指定
位置
align="center" セル内の行揃え
  • left・・・左揃え
  • right・・・右揃え
  • center・・・中央揃え(初期値)
  • justify・・・両端揃え
  • char・・・指定文字揃え
valign="middle" セル内の縦方向の位置
  • top・・・上
  • middle・・・中央(初期値)
  • center・・・中央
  • bottom・・・下
  • baseline・・・1行目のベースライン
height="" セルの高さ(ピクセル数または%)
width="" セルの横幅(ピクセル数または%)
nowrap セル内で自動改行を禁止
char="" 位置を揃える文字の指定
charoff="" セルの左端からどの位置に文字を表示するか指定

対応ブラウザなどのデータ

形式 <td>~</td> カテゴリ セクショニングルート
親要素 tr 子要素 フローコンテンツ
開始タグ 必須 終了タグ 省略可能
分類 ブロックレベル要素
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

abbr、align、axis、char、charoff、height、nowrap、scope、valign、widthの各属性は、HTML5では廃止。