HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード
HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)

HTMLタグボードトップ >> ゼロから始めるホームページ作成講座 >> 実際に作ってみよう >> 表を作成する
お問い合わせはこちら サイトマップはこちら

実際に作ってみようメニュー
1.初期設定をする
2.ファイルの新規作成
3.背景を設定する
4.文字に変化を与える
5.表を作成する
6.画像を挿入する
7.リンクを指定する
8.ファイルを保存する

表を作成する [タグ編]

[ ソフトで編集 ] [ 直接タグで編集 ]

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

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


表を作成してみよう

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


完成例

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


項目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>はそのままにします。


<< 前のページ 1 2 3 4 5 6 7 8 次のページ >>


こんな時どうする?

テーブルタグの書き方


HTMLタグ辞典
テーブルタグ


画面のトップへ戻る

ゼロから始めるホームページ作成講座のトップへ

必要なものを揃えよう
伝えたい情報を考えよう
仕組みを理解しよう
実際に作ってみよう
作ったファイルを公開しよう
製作にあたり注意すべきこと
練習問題にチャレンジ!

訪問者優位のWEBデザインTipsのトップへ

インターネットで小遣い稼ぎのトップへ

今すぐ使える!便利ツールのトップへ