テーブルとその他のタグ

テーブル(表)

HTMLで表を作るときは以下のタグの組合せによって表現する。

<TABLE>...</TABLE>
テーブル全体を表すタグ
<TR>...</TR>
横1行を表すタグ
<TH>...</TH>
ヘッダを表すタグ
<TD>...</TD>
セルを表すタグ

例 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Sample of Table</TITLE>>
</HEAD>
<TABLE>
<TR>
<TH> 番号</TH> <TH> 名前</TH>
</TR>
<TR>
<TD> 99AU0000</TD> <TD> 阿部</TD>
</TR>
<TR>
<TD> 99AU0001</TD> <TD> 安部</TD>
</TR>
</TABLE>
</BODY>
</HTML>

表示例

このままでは見にくいのでCSSを使ってデザインを変えてみよう。
以下のファイルをtable-sample.cssという名前で作る。 

TH {
	background-color: blue;
	color: white;
}
TD {
	background-color: green;
	color: white;
}

これを上のHTMLデータの<HEAD>タグの中で<LINK>タグによって読み込んでやる。 

<HTML>
<HEAD>
<TITLE>Sample of Table</TITLE>>
<LINK REL = "stylesheet" TYPE = "text/css" HREF = "table-sample.css">
</HEAD>
<BODY>
.
.
.
</BODY>
</HTML>

表示例

整形済テキスト

C言語のプログラムなどを、HTMLによって書きたいとき 書いてある通りに出力して欲しいことがある。 その場合は<PRE>タグを使用する。

例 

<PRE>
#include &lt;stdio.h&gt;
main()
{
	printf("hellow\n");
}
</PRE>

を表示すると 

#include <stdio.h>
main()
{
	printf("hellow\n");
}

の様に表示される。

上のプログラムで&ltは<、&gtは>を表す。
この方法で表さないとブラウザがstdio.hをタグと間違えてしまうので表示がおかしくなる。

特殊文字

上で述べたように< , > , & , " などはHTMLの中で特別な意味があるので、そのままでは使用できない。
例えばC言語で #include <stdio.h> という部分も、そのままHTMLのデータファイルの中に書いておくと #include という様に<stdio.h>の部分が消えてしまいまう。
これを避けるためには、次の特別な文字を使用する。

&lt;
<
&gt;
>
&amp;
&
&quot;
"

上の特殊文字を使用して #include &lt;stdio.h&gt; と書いておけば #include <stdio.h> と正しく表示される。

論理型タグ

< DFN> ... < /DFN>
文章の中で、定義された単語を表現するために使用する。(イタリック体)
(例)This is a computer(Apple).
< EM> ... < /EM>
文章の中で、強調された文字を表す。(強調イタリック体)
(例)This is a Apple.
< CITE> ... < /CITE>
本など作品の、名前を表すのに使用される。(イタリック体)
DFHelp is this manual. (例)
< CODE> ... < /CODE>
コンピュータのプログラムや、データを表現するのに使用する。(固定幅フォント)
(例)printf("hello\n");
< KBD> ... < /KBD>
キーボードから入力される文字を、表現するのに使用される。(固定幅フォント・ボールド体)
(例)vi test.c
< SAMP> ... < /SAMP>
コンピュータから表示される文字を、表現するのに使用される。(固定幅フォント)
(例)File Not Found
< STRONG> ... < /STRONG>
文章の一部を強調するのに使用される。(強調文字・ボールド体)
(例)This is strong charactor.
< VAR> ... < /VAR>
変数を表現するのに使用される。(イタリック体)
(例)val = 3 * y;

物理型タグ

<B>... </B>
ボールド体
(例)This is Bold.
<I>... </I>
イタリック体
(例)This is Itaric.
<TT>... </TT>
タイプライタ体
(例)This is Typewriter.
<U>... </U>
アンダーライン
(例)This is Underline.

参考

Prev | Next
Index | Home
abe@injapan.net