XHTMLタグ辞典-テーブル

テーブルタグは文章内に表を作ることの出来るタグです。XHTMLはテキスト文章とデザイン(例:フォントサイズ、カラー、背景色など)を別々に構成していくためコーディングもしやい記述方法だと思います。

XHTML1.0タグ辞典リンク

テーブルを作りたい

<table width="テーブルの幅" border="線の太さ">
<tr><td>内容</td></tr>
</table>

<table>~</table>ないが表になり、<td>~</td>がセルになります。<tr>~</tr>は行を定義するタグになります。

※下記のサンプルはborder="1"で罫線(ボーダー)を作っていますが、このページではCSS(スタイルシート)で罫線(ボーダー)の色と太さを設定してありますので、CSS(スタイルシート)を設定してない場合の罫線(ボーダー)は下記のサンプルとは異なりますがご了承ください。

このセルはセンタ
リングして見ます。
各セルに設定できます。
このセルは縦方向を上にしてあります。

<td>タグを増やせば横に列が増えます

各セルのサイズ、罫線などの色などは、CSS(スタイルシート)で変更できます。

<tr>~<tr>が縦方向の行数になります。

このセルのみ背景色をつけて見ます。

上記のサンプルはタグ内にalign=”center”(センタリング)、valign=”top”(縦方向上)、bgcolor=”#CCCCCC”(背景色)を付け加えて作ってあります。

左寄せにする場合はalign="left"、右寄せにする場合はalign="right"、縦方向を中央にする場合はvalign="middle"、縦方向を下にするにはvalign="bottom"、背景色を変えるにはbgcolor="ここのカラーコードを変える"と変更できます。

<table width="710" border="1">
  <tr>
    <td align="center">このセルはセンタ<br />
    リングして見ます。<br />
    各セルに設定できます。</td>
    <td valign="top">このセルは縦方向を上にしてあります。</td>
    <td>tdタグを増やせば横に列が増えます</td>
  </tr>
  <tr>
    <td>各セルのサイズ、罫線などの色などは、CSS(スタイルシート)で変更できます。</td>
    <td>tr~trが縦方向の行数になります。。</td>
    <td bgcolor="#CCCCCC">このセルのみ背景色をつけて見ます。</td>
  </tr>
</table>

Top

最終更新日: 2010年12月7日