dokidoki
logo
はじめに
★ インターネットとWWW
入門の前に
★ HTMLについて
〜ファイル名と拡張子〜
〜タグの記述方法とルール〜
★ 用意するもの
★ 主な操作の手順
入門
LESSON 1 文字を表示させる
2 簡単にレイアウトする
3 文字をデザインする
4 色を設定する
5 画像を表示させる
6 リンクする
7 テーブル（表）を作成する
8 フレームを作る
★ おまけ
公開する
★ 用意するもの
★ FFFTPの使い方
★ Fetchの使い方
索引
★ タグ辞典
★ カラー見本表
HTML入門
Lesson7　テーブル（表）を作成する
HTML例文---Lesson7-1　単純なテーブルを作る
<HTML>
<HEAD>
<TITLE>
表の練習
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#333333" LINK="#0000FF" VLINK="#9933FF" ALINK="#CC33FF">
<TABLE BORDER="1" BORDERCOLOR="#000000">
<TR>
<TD>ヨーロッパ</TD>
<TD>イギリス</TD>
<TD>ロンドン市内観光</TD>
<TD>シェークスピア生家</TD>
</TR>
<TR>
<TD>ヨーロッパ</TD>
<TD>フランス</TD>
<TD>パリ市内観光</TD>
<TD>ユーロディズニーランド</TD>
</TR>
<TR>
<TD>ヨーロッパ</TD>
<TD>イタリア</TD>
<TD>ローマ市内観光</TD>
<TD>バチカン市国</TD>
</TR>
<TR>
<TD>アジア</TD>
<TD>中国</TD>
<TD>天安門広場</TD>
<TD>万里の長城</TD>
</BODY>
</HTML>
解説
テーブルの横方向の並びを「行」、縦方向の並びを「列」、項目一つ一つを「セル」といいます。 <TABLE>〜 </TABLE>タグをテーブル最初と最後に入れます。
<TABLE>〜 </TABLE>タグの間に<TR>〜 </TR>タグ、さらに<TR>タグの間に<TD>〜 </TD>タグをいれて作ります。
<TR>タグは行を表し、<TD>タグで挟まれた部分はセルを表しています。
BORDER属性で線の太さを指定しています。
HTML例文---Lesson7-2　縦方向のセルを連結
<HTML>
<HEAD>
<TITLE>
旅行の思い出
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#333333" LINK="#0000FF" VLINK="#9933FF" ALINK="#CC33FF">
<TABLE BORDER="1" BORDERCOLOR="#000000">
<TR>
<TD rowspan="3">ヨーロッパ</TD>
<TD>イギリス</TD>
<TD>ロンドン市内観光</TD>
<TD>シェークスピア生家</TD>
</TR>
<TR>
<TD>フランス</TD>
<TD>パリ市内観光</TD>
<TD>ユーロディズニーランド</TD>
</TR>
<TR>
<TD>イタリア</TD>
<TD>ローマ市内観光</TD>
<TD>バチカン市国</TD>
</TR>
<TR>
<TD>アジア</TD>
<TD>中国</TD>
<TD>天安門広場</TD>
<TD>万里の長城</TD>
</BODY>
</HTML>
解説
縦方向にセルを連結させるにはROWSPAN属性を使います。連結したいセルの一番上で指定します。連結させたいセルの個数はこの場合"3"です。ROWSPANを指定したら、下にある<TD>ヨーロッパ</TD>を２行とも削除します。
HTML例文---Lesson7-3　さらに横方向のセルを連結
<HTML>
<HEAD>
<TITLE>
旅行の思い出
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#333333" LINK="#0000FF" VLINK="#9933FF" ALINK="#CC33FF">
<TABLE BORDER="1" BORDERCOLOR="#000000">
<TR>
<TD rowspan="3">ヨーロッパ</TD>
<TD>イギリス</TD>
<TD>ロンドン市内観光</TD>
<TD>シェークスピア生家</TD>
</TR>
<TR>
<TD>フランス</TD>
<TD>パリ市内観光</TD>
<TD>ユーロディズニーランド</TD>
</TR>
<TR>
<TD>イタリア</TD>
<TD COLSPAN="2">ローマ市内観光</TD>
</TR>
<TR>
<TD>アジア</TD>
<TD>中国</TD>
<TD>天安門広場</TD>
<TD>万里の長城</TD>
</TR>
</BODY>
</HTML>
解説
横方向にセルを連結させるにはCOLSPAN属性を使います。連結したいセルの一番左で指定します。連結させたいセルの個数はこの場合"2"です。COLSPANを指定したら、すぐ下にある<TD>バチカン市国</TD>を削除します。

copyright