それではこれから、ウェブサイトでテーブルを作成する
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>でセルを設定します。
この説明だけではわかりにくいので、
記述例として、見出し付き2×2の
テーブルを書いてみます。
テーブル例1
<記述例>
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>1列1行</td>
<td>2列1行</td>
</tr>
<tr>
<td>1列2行</td>
<td>2列2行</td>
</tr>
</table>
<表示例>
見出し1 | 見出し2 |
---|---|
1列1行 | 2列1行 |
1列2行 | 2列2行 |

主な属性
tableで指定できる主な属性は
・枠線の太さ:border=”ピクセル数”
・枠線の色:bordercolor=”カラーコード”
・セルの余白:cellpadding=”ピクセル数”
・セルの間隔:cellspacing=”ピクセル数”
・背景色:bgcolor=”カラーコード”
・背景画像指定:background=”画像ファイル名”
・表示位置指定:align=”left”(左寄せ)、
align=”center”(中央揃え)、align=”right”(右寄せ)
・テーブルの横幅:width=”ピクセル数またはパーセント”
・テーブルの縦幅:height=”ピクセル数”
また、このタグもスタイルシートで詳細の設定が出来ます。
テーブル例2
枠線太さ1ピクセル、中央寄せ、横300ピクセル、
縦200ピクセルのテーブルをstyle属性に直接CSSを記述し
作成していきます。
<記述例>
<table style="text-align:center; width:300px; height:200px;">
<tr>
<td>1列1行</td>
<td>2列1行</td>
</tr>
<tr>
<td>1列2行</td>
<td>2列2行</td>
</tr>
</table>
<表示例>
1列1行 | 2列1行 |
1列2行 | 2列2行 |
テーブル例3
背景色:ベージュ、
枠線太さ:左 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>1列1行</td>
<td>2列1行</td>
</tr>
<tr>
<td>1列2行</td>
<td>2列2行</td>
</tr>
</table>
<表示例>
1列1行 | 2列1行 |
1列2行 | 2列2行 |
このように、簡単にテーブルを作成することができます。
コメント