tdダグ/表(テーブル)のデータ

<td>タグは表のデータを示します。

説明

 表を示す<table>タグの中に行を示す<tr>タグを記述し、その中に<td>を配置する事で表のデータを記述します。

表のデータの表示例

構文

 <td>タグはHTMLボディー内に記述します。構文は以下の通りです。

<td colspan="横結合の数" rowspan="縦結合の数" width="幅" align="横配置" valign="縦配置">表のデータを記述</td>

 それぞれのオプションの意味は以下の通りです。

【tdタグのオプションの意味】
オプション 指定方法 説明
colspan 数字 セルを横に結合します。例えば2と指定すると1つ右のtdと結合されます。
rowspan 数字 セルを縦に結合します。例えば2と指定すると1つ下のtdと結合されます。
width 数字(ピクセル)、又は数字% 表の幅を指定します。%で記述すると表示出来る幅に対する割合になり、100%指定では幅一杯に取ります。
align center,left,right, セルの中の文字をcenterでセンタリング、leftで左寄せ、rightで右寄せします。
valign middle,top,bottom セルの中の文字をmiddleで上下中央、topで上寄せ、bottomで下寄せします。

 配置は<td>タグではセル単位の指定になりますが、<tr>タグで指定すると1行に対して一括で指定出来ます。

利用例

 オプションを指定せずに使った時の例は以下の通りです。太字で囲った範囲が1行を示し、その中に<td>タグを使ってデータを記述します。

<table border="1" cellpadding="2" cellspacing="1">
<caption>【お奨めキャンプ商品】</caption>
<tr>
<th>製品</th>
<th>A社製</th>
<th>B社製</th>
<th>C社製</th>
</tr>
<tr>
<td>テント</td>
<td>Aテント</td>
<td>Bテント</td>
<td>Cテント</td>
</tr>
<tr>
<td>ランタン</td>
<td>Aランタン</td>
<td>Bランタン</td>
<td>Cランタン</td>
</tr>
</table>

 上記を表示すると以下になります。

【お奨めキャンプ商品】
製品 A社製 B社製 C社製
テント Aテント Bテント Cテント
ランタン Aランタン Bランタン Cランタン

セルの結合

 セルを結合する例は以下の通りです。

<table border="1" cellpadding="2" cellspacing="1">
<caption>【お奨めキャンプ商品】</caption>
<tr>
<th>製品</th>
<th>A社製</th>
<th>B社製</th>
<th>C社製</th>
</tr>
<tr>
<td>テント</td>
<td colspan="2">A社とB社共同開発テント</td>
<td rowspan="2">Cテントとランタンセット</td>
</tr>
<tr>
<td>ランタン</td>
<td>Aランタン</td>
<td>Bランタン</td>
</tr>
</table>

 上記では赤字部分で横に2つのセルを結合し、青字部分で縦に2つのセルを結合しています。上記を表示すると以下になります。

【お奨めキャンプ商品】
製品 A社製 B社製 C社製
テント A社とB社共同開発テント Cテントとランタンセット
ランタン Aランタン Bランタン

幅と配置の指定

 幅と配置を指定した例は以下の通りです。

<table border="1" cellpadding="2" cellspacing="1">
<caption>【お奨めキャンプ商品】</caption>
<tr>
<th>製品</th>
<th>A社製</th>
<th>B社製</th>
<th>C社製</th>
</tr>
<tr>
<td width="25%" align="left">テント</td>
<td align="center">A</td>
<td align="right">B</td>
<td>C</td>
</tr>
<tr>
<td>ランタン<br>改行で<br>3行</td>
<td valign="middle">Aランタン</td>
<td valign="top">Bランタン</td>
<td valign="bottom">Cランタン</td>
</tr>
</table>

 赤字部分は幅を25%と指定しており、表全体の25%の幅を確保します。合わせて左寄りに表示するようにしています。

 青字部分はセンタリング、緑部分は右寄りに指定しています。

 茶色部分では上下中央、オレンジ部分では上寄り、紫部分では下寄りに表示するようにしています。

 これを表示すると以下になります。

【お奨めキャンプ商品】
製品 A社製 B社製 C社製
テント A B C
ランタン
改行で
3行
Aランタン Bランタン Cランタン

関連ページ

・ホームページ作成「表の挿入

 単純な表の挿入方法から罫線や幅の指定、セルの結合、CSSも活用したセンタリング方法、色の変更方法、表毎にスタイルを変える方法等を説明しています。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加