4.3.テーブルの取り扱い

今回はテーブル(表)を使ってみます。とりあえず2列2行の簡単なテーブルを作ってみましょう。まずは例のごとくおまじないから。タイトル部分は「2*2のテーブル」とでもしておきます。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>2*2のテーブル</title>
</head>
<body>
</body>
</html>

次にtable要素を書きます。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>2*2のテーブル</title>
</head>
<body>
<table></table>
</body>
</html>

続いてテーブルの中身を書くことにします。まずは行。今回は2行あるのでtr要素を二つ書きます。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>2*2のテーブル</title>
</head>
<body>
<table>
<tr></tr><tr></tr>
</table>
</body>
</html>

次に升目、td要素を追加します。td要素内には表の升目に表示したいものを記述します。今回は数字にしてみました。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>2*2のテーブル</title>
</head>
<body>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</body>
</html>

ここまで出来たらブラウザで表示してみましょう。2*2の表が表示されました? 以下にサンプルを示します。

サンプル4_3:sample4_3.html

テーブルはその名の通り表として用います。リンク集なんかでよく使われていますね。