表を作成する [タグ編]

表(テーブル)は無限の可能性

ホームページで使われる表(テーブル)は単に表として使われるだけでなく、ページ全体のレイアウトや配置、段組などにも使用され、使用頻度の高いタグとして有名です。

この表を使いこなせば、たくさんのレイアウトを表示させることができるようになります。

表を作成してみよう

それでは、実際に表を作成してみましょう。ここではタグで直接編集する方法を紹介します。

完成例

最終的に以下のような表を作ることが目標です。

項目1 項目2
セル左寄せ セル中央(センタリング)
セル右寄せ セル背景設定

表の幅:500ピクセル、セルの幅(左列):200ピクセル、セルの幅(右列):300ピクセル
セル内の余白:3ピクセル、罫線の幅:1ピクセル、使用背景色:#999999/#b3d9ff/#ffffff/#f6f6f6、表の枠:なし

操作手順

デスクトップから[スタート]→[プログラム]→[アクセサリ]→[メモ帳]でメモ帳を起動する。

起動したら、以下の文字を入力するか、コピーして貼付(コピー&ペースト)をする。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta
http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS”>
<meta
http-equiv=“Content-Style-Type” content=“text/css”>
<title>表を挿入しよう</title>
</head>
<body><!–表の挿入タグ例–>
<table border=”0″ width=”500″ cellpadding=”3″
cellspacing=”1″ bgcolor=”#999999″>
<tr>
<td bgcolor=”#b3d9ff” align=”center” width=”200″>項目1</td>
<td bgcolor=”#b3d9ff” align=”center” width=”300″>項目2</td>
</tr>
<tr>
<td bgcolor=”#ffffff”>セル左寄せ</td>
<td bgcolor=”#ffffff” align=”center”>セル中央(センタリング)</td>
</tr>
<tr>
<td bgcolor=”#ffffff” align=”right”>セル右寄せ</td>
<td bgcolor=”#f6f6f6″ align=”center”>セル背景設定</td>
</tr>
</table>
<!–ここまで–></body>
</html>

記述手順

黒字で表示している部分が、今回の表を表すタグです。

まず、<table>というタグに注目してください。これが、表の骨格となる部分です。

さらに、<tr>は表の中の行を指定し、上から順に行が並びます。さらに行に対する列を<td>で指定します。

今回の例は3行2列ですから、<tr>タグが3つ、<td>タグが6つ(1行で2列あるから)登場します。

表の上から順に指定していくので、最初に登場するのは「項目1と2」が書かれている行と列で、タグは

<tr>
<td bgcolor=”#b3d9ff” align=”center” width=”200″>項目1</td>
<td bgcolor=”#b3d9ff” align=”center” width=”300″>項目2</td>
</tr>

です。これを行ごとに増やしていき、最後に</table>でタグを閉じればよいのです。

例えば、2行4列であるなら、<tr>タグは2つ、<td>タグが1つの<td>に対し、4つです。

各属性を把握する

これら表のタグに設定する属性は以下のようになります。

各タグの属性 属性の意味 書き方の例
表の骨格 <table> border 表の枠を指定 (0で枠なし) border=”1″
width 表の幅を指定 width=”500″
width=”80%”
height 表の高さを指定 height=”500″
height=”80%”
cellpadding セル内の余白を指定 cellpadding”3″
cellspacing 罫線の幅を指定 cellspacing=”1″
bgcolor 表全体の背景色を指定 bgcolor=”#f5f5f5″
表のセル <td> width 指定したセルの幅 width=”300″
width=”100%”
height 指定したセルの高さ height=”250″
bgcolor 指定したセルの背景色 bgcolor=”#ffffff”
align 指定したセル内の位置揃え
(右寄せ/中央寄せ/左寄せ)
align=”right”
align=”center”
align=”left”

※セルとは行と列によって区切られた一つの領域のことです。

※セルの属性は基本的に<td>内に書き、<tr>はそのままにします。

テーブルタグの書き方

HTMLタグ辞典

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSSを優しく学ぶには

created by Rinker
¥2,178 (2020/10/04 17:18:34時点 Amazon調べ-詳細)

WordPressで簡単にブログを書いてみたい方

最新情報をチェックしよう!