超初心者でも簡単！あなたもできるHP作成！− Make easily  
||　トップページ　||　HTML　||　Style Sheet　||　リファレンス　||　Web素材　||　Contact Us　||　サイトマップ　||　初めての方　||　
HP作成
はじめに HP作成に必要なもの HTMLについて HTML作成の基本 実際に作ってみよう！ ファイルの保存方法 タグの基本 見出しの書き方 表示位置を変える 段落・改行を入れる 画像を表示する 文字サイズと色の変更 テーブル(表)の基本 セルに文字を入れる セルの統合 セル内の配置を変える 文字の太さを変える リスト番号をつける リンクって何？ リンクを張ってみよう サーバって何？ HPを公開しよう！

表の作り方2

セルの統合

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

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

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

＜例題＞10
<html>
<head>
<title>MY HOMEPAGE</title>
</head>
<body>

<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<font size="4" color="#0000FF">スポンジのつくり方</font>
<p>
<table width="350" border="1">
<tr>
<td colspan="2">＜材料＞（例）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>
</center>

</body>
</html>

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

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

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

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

では上の画像のように文字の位置を変えてみましょう。
位置を変えるには　<td>　のタグに　「align="******"」を追加します。

「align="center"」と追加すると文字や画像がセンタリングされます。
「align="right"」と追加すると文字や画像が右寄せになります。
「align="left"」と追加すると文字や画像が左寄せになりますが、何も指定しなければ左寄せになるのであまり使わないでしょう。

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

＜例題11＞
<html>
<head>
<title>MY HOMEPAGE</title>
</head>
<body>

<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<font size="4" color="#0000FF">スポンジのつくり方</font>
<p>
<table width="350" border="1">
<tr>
<td colspan="2" align="center">＜材料＞（例）18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td align="center">３個</td>
</tr>
<tr>
<td>砂糖</td>
<td align="center">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td align="center">90g</td>
</tr>
<tr>
<td>バター</td>
<td align="center">25g</td>
</tr>
</table>
</center>

</body>
</html>

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

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