超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

表の作り方2

セルの統合

次に上の画像のように一番上のセルを2つ つなげて(以下、統合とする)ひとつにしてみましょう。

セルを統合するには「colspan」を使います。
使い方は、セルを2つ統合するには「colspan="2"」3つ統合するには「colspan="3"」と指定します。

ここで注意しなければいけないのは、2つ以上セルを統合したときに余ったセルを削除するのを忘れないでください。

<例題>10
<!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>

<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}

.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 colspan="2"><材料>(例)18cmの丸型1個分</td>
<td> </td>   ←このセルが余るので削除する。
</tr>
<tr>
<td>卵</td>
<td>3個</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>

余ったセルの意味がわからないかもしれないのでもう少し説明しておきます。
2列のセルを統合する場合、
「colspan="2"」を使って、このセルと隣のセルをくっつけて1個にする この部分が余計なので削除します。
   
   

すると以下のようにセルが統合されます。
 
   
   

では、話を元に戻します。
先ほどのファイルをブラウザで表示させると下の画像のようにうまく表示できましたか?

セル内の表示位置を変える

では上の画像のように文字の位置を変えてみましょう。
位置を変えるにはスタイルシートに 

.sell {
text-align:center;
}

を追加します。

それをテーブルのセルで <td class="sell"> と指定するとセル内の文字や画像がセンタリングされます。

クラス名は必ず「"」(ダブルクォーテーション)で忘れずに囲んでください。

<例題11>
<!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>

<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}

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

.blue {
color:#0000FF;
font-size:120%;
margin-bottom:20px;
}

.sell {
text-align:center;
}


-->
</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 colspan="2" class="sell"><材料>(例)18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td class="sell">3個</td>
</tr>
<tr>
<td>砂糖</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>バター</td>
<td class="sell">25g</td>
</tr>
</table>
</div>

</body>
</html>

これをブラウザで表示すると下の画像のように表示されます。
うまく表示できましたか?

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