ウェブサイト作りにHTMLタグでテーブルを作成しよう！

それではこれから、ウェブサイトでテーブルを作成する
HTMLタグについて説明していきます。

テーブルを作成するHTMLタグ

ウェブサイト作りに欠かせないものとして、
テーブル（表）があります。

そのテーブルを作成するためのHTMLタグ
を紹介します。

TABLEタグ

テーブルを作成するためには、table タグを使用します。

例：<table></table>

table タグは th タグ、tr タグ、td タグを
組み合わせてテーブルを作成します。

th要素は「Table Header（見出し）」の略です。
テーブルの見出しを意味します。

tr要素は「Table Row（行）」の略です。
テーブルの行を意味します。

td要素は「Table Data（データ）」の略です。
テーブルのデータとなるセル、表では列を意味します。

テーブルの基本的な構造は、

<table></table>が全体で、
<tr></tr>は表の横一行を設定、
その中に<th></th>で表の見出しセルを設定、
<td></td>でセルを設定します。

この説明だけではわかりにくいので、
記述例として、見出し付き２×２の
テーブルを書いてみます。

テーブル例１

＜記述例＞

<table border="1">
  <tr>
    <th>見出し１</th>
    <th>見出し２</th>
  </tr>
  <tr>
    <td>１列１行</td>
    <td>２列１行</td>
  </tr>
  <tr>
    <td>１列２行</td>
    <td>２列２行</td>
  </tr>
</table>

＜表示例＞

見出し１	見出し２
１列１行	２列１行
１列２行	２列２行

主な属性

tableで指定できる主な属性は

・枠線の太さ：border=”ピクセル数”
・枠線の色：bordercolor=”カラーコード”
・セルの余白：cellpadding=”ピクセル数”
・セルの間隔：cellspacing=”ピクセル数”
・背景色：bgcolor=”カラーコード”
・背景画像指定：background=”画像ファイル名”
・表示位置指定：align=”left”（左寄せ）、
　　align=”center”（中央揃え）、align=”right”（右寄せ）
・テーブルの横幅：width=”ピクセル数またはパーセント”
・テーブルの縦幅：height=”ピクセル数”

また、このタグもスタイルシートで詳細の設定が出来ます。

テーブル例２

枠線太さ1ピクセル、中央寄せ、横300ピクセル、
縦200ピクセルのテーブルをstyle属性に直接CSSを記述し
作成していきます。

＜記述例＞

<table style="text-align:center; width:300px; height:200px;">
  <tr>
    <td>１列１行</td>
    <td>２列１行</td>
  </tr>
  <tr>
    <td>１列２行</td>
    <td>２列２行</td>
  </tr>
</table>

＜表示例＞

１列１行	２列１行
１列２行	２列２行

テーブル例３

背景色：ベージュ、
枠線太さ：左 1ピクセル、右 5ピクセル、上 10ピクセル、下 15ピクセル、
のテーブルをstyle属性に直接CSSを記述し作成していきます。

＜記述例＞

<table style="background:beige; border-left:solid 1px; border-top:solid 10px; border-right:solid 5px; border-bottom:solid 15px;">
  <tr>
    <td>１列１行</td>
    <td>２列１行</td>
  </tr>
  <tr>
    <td>１列２行</td>
    <td>２列２行</td>
  </tr>
</table>

＜表示例＞