表の作り方

基本の表の作り方

では、サブタイトルの下に表を作ってみましょう。

表を作るには「テーブルタグ」を使います。
まず基本のテーブルを作ります。

列と行の関係は以下のようになっています。

列

行

セル

では、テーブルを作ってみましょう。

（例1）基本のテーブル（列1、行1）

これをブラウザで表示させると下のようになります。

このままでは表らしくないので今度は列を2、行を2にしてみます。

（例2）基本のテーブル（列2、行2）

これをブラウザで表示させると下のようになります。

テーブルを作るにはまずテーブルの開始タグと終了タグが必要です。
それぞれタグの意味は以下のようになります。

例2タグの説明

<table width="350" border="1">　　←テーブル開始タグ（幅350px、線の太さを1に指定）
<tr> 　　　←1行目枠の開始タグ
<td> </td>　　　←1列目セルの開始と終了タグ
<td> </td>　　　←2列目セルの開始と終了タグ
</tr>　　　　←1行目枠の終了タグ（ここで折り返し）
<tr>　　　　←2行目枠の開始タグ
<td> </td>　　　　←2列目セルの開始と終了タグ
<td> </td>　　　　←2列目セルの開始と終了タグ
</tr>　　　　←2行目枠の終了タグ
</table>　　　←テーブル終了タグ

なんとなくわかりましたか？

では、サブタイトルの下に表を作ってみましょう。

列が2、行が5のテーブルを作ってみます。

列2、行5のテーブル

では、これを例題7に貼り付けてみましょう。

＜例題8＞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>

.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}

.blue {
color:#0000FF;
font-size:120%;
margin-bottom:20px;
}
-->
</style>
</head>

<body>

<div class="center">
<h1>MY HOMEPAGE</h1>

<p>
<img src="cake.jpg">
<p>
<span class="blue" >スポンジのつくり方</span>
</div>

</body>
</html>

ここで　<div align="center">　</div>で、テーブルをはさんでいるのは、IE以外のブラウザではテーブルはクラスセレクタをつかっただけではセンタリングされないため、IE以外のブラウザにも対応するために　<div align="center">　</div>で囲んでいます。

これをブラウザで表示させると下の画像のようになります。

ブラウザによっては、セルの中が空白の場合、うまく表示されずに下の画像のようになってしまうことがあります。
セルに文字や画像が入れば、正常に表示されるので心配いりません。

セルに文字を入れる

では、この表のセルに文字を入れていきましょう。

＜例題9＞

.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}

.blue {
color:#0000FF;
font-size:120%;
margin-bottom:20px;
}
-->
</style>
</head>

<body>

<div class="center">
<h1>MY HOMEPAGE</h1>

<p>
<img src="cake.jpg">
<p>
<span class="blue" >スポンジのつくり方</span>
</div>

<div align="center">
<table width="350" border="1">
<tr>
<td>＜材料＞（例）18cmの丸型1個分</td>
<td> </td>
</tr>
<tr>
<td>卵</td>
<td>３個</td>
</tr>
<tr>
<td>砂糖</td>
<td>90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td>90g</td>
</tr>
<tr>
<td>バター</td>
<td>25g</td>
</tr>
</table>
</div>

</body>
</html>

このように　<td>　と　</td>　の間に入れた文字や画像がセルの中に表示されます。

→次は、セルを統合してみましょう！

▲このページのトップに戻るTop