テーブル(表)とリスト(一覧)


テーブルとリスト

ここでは「テーブル」と「リスト」について説明します。
実際に見てもらった方が早いと思うので、下にサンプルソースを書きます。
以下の背景が灰色の部分をエディタにコピー＆ペーストして、作業用フォルダにtablelist.htmlという名前で保存してください。


<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>サイトのタイトルを書く部分です。</title>
</head>
<body>
<p>まずはテーブルを書いてみましょう。</p>
<table>
<tr>
<td>(1)-1</td><td>(1)-2</td><td>(1)-3</td>
</tr>
<tr>
<td>(2)-1</td><td>(2)-2</td><td>(2)-3</td>
</tr>
</table>

<p>次はリストを書いてみましょう。</p>
<ol>
<li>1つ目</li>
<li>2つ目</li>
<li>3つ目</li>
</ol>
</body>
</html>

さて、保存したファイルをブラウザ(InternetExplorerやFireFox等)で開いてみましょう。 開くと以下のように表示されると思います。
サンプル画面


では、テーブルとリストに分けて説明していきます。


テーブル

テーブルとは「表」のことです。 エクセル等の表計算ソフトを思い浮かべれば分かりやすいと思います。
つまりは、縦横の格子(網目)状に区切られた1つ1つのマスに、文字や画像を表示させることが出来るってことです。
例えば、当サイトの逆アクセスランキング等の各ファンサイトの紹介が書かれている部分。あれはテーブルで作られています。


まず、「行」と「列」の考え方から。
行(row)とは横のまとまりのこと。
列(col)とは縦のまとまりのこと。
つまり↓の様な感じです。
テーブル概要

では、テーブルを作るのに使われているタグについて説明します。

tableタグ
テーブルの最初と終わりをくくるタグ。
テーブルを作るときは、<table>ではじめて</table>で終わると覚えておきましょう。
trタグ
「行」をあらわすタグ。
<tr>と</tr>の間に書かれたものは、1行として表示されます。 つまり、<table>と</table>の間にあるtrタグ(<tr>と</tr>のセット)の数だけ行が出来るということです。
tdタグ
<td>と</td>の間に書かれたものをページ上に表示します。 つまり、<tr>と</tr>の間にあるtdタグ(<td>と</td>のセット)の数だけ列が出来るということです。 なお、書いた順に左列から右列に向かって配置され、行が変わるとまた１番左列に戻ります。

テーブルを作る時の約束事は、<td>と</td>の間だけしかタグ以外の文字を書いてはいけないということです。 例えば、下みたいのは×。

<table>
<tr>ここには書けない
<td>ここはOK</td><td>ここもOK</td><td>もちろんここもOK</td>
</tr>ここにも書けない
</table>

簡単に言えば、tableタグの間にtrタグを作りたい行数分書き、それぞれのtrタグ内にtdタグを作りたい列数分書くということですね。


あと1つ。複数列や複数行にまたがった1セルを作ることも出来ます。
複数列、複数行をまたぐセルのあるテーブル
↑の様なテーブルを作るにはcolspanとrowspanというものを使います。 例を書いてみます。

<table>
<tr>
<td rowspan="2" >(1)</td><td>(2)</td>
</tr>
<tr>
<td>(3)</td>
</tr>
<tr>
<td colspan="2">(4)</td>
</tr>
</table>

簡単に説明すると、rowspan="2"というのが2行分結合(横に並んだ2つのセルをくっつける)、colspan="2"というのが2列分結合(縦に並んだ2つのセルをくっつける)ということです。
数字の「2」の部分を「3」にすれば3セルが結合されます。

これは実際に書いて、色々試してみるのが理解する一番の近道なので、色んなパターンを自分で書いてみて下さいね。


リスト

リストとは「一覧」のことです。 書いた順に上から表示されます。

リストには大きく分けて2種類あって、左側に数字の連番がつくもの(1.2.3.・・・)と●や■等のマークがつくものがあります。
olタグの場合は数字の連番、ulタグの場合はマークが表示されます。 ulタグを使いたい場合は、<ol>と</ol>の部分を<ul>と</ul>に書き換えるだけでOKです。

では、リストを作るのに使われているタグについて説明します。

olタグ
各リスト項目の前に連番数字がつくリストを作るときに、最初と最後をくくるタグ。 中に直接書けるのはliタグのみで、liタグでくくらずに文字を書いてはいけない。
上から下への並び順に意味があるリストを作りたいときは<ol>ではじめて、間にliタグを必要数書き、最後に</ol>を書くということです。
ulタグ
各リスト項目の前にマークがつくリストを作るときに、最初と最後をくくるタグ。 中に直接書けるのはliタグのみで、liタグでくくらずに文字を書いてはいけない。
並び順には意味が無く、ただ項目を並べたいときには<ul>ではじめて、間にliタグを必要数書き、最後に</ul>を書くということです。
ちなみにマークの種類の変えるのは、後のページで説明するCSSというものを使うことで出来ます。
liタグ
実際に表示する各項目の前後を挟むタグ。 olとul両方で使用する。
olかulの間にのみ書くことが出来るタグです。

他にも色々なタグがあります

今まで文字、画像、リンク、テーブル、リストについて説明してきましたが、XHTMLには他にも色々なタグがあります。
それらを見ることが出来るサイトをご紹介します。

コピペで出来る！ホームページ作成入門
ネトゲブックマークの姉妹サイト。ホームページを作りたいけど何をしていいか分からない人向けに、1から説明しています。
コピー＆ペーストで大枠を作って、実際に表示したい文字や画像の部分のみを書き換えればホームページが完成するようなつくりになっています。 タグの説明やCSSの説明ももちろんあります。
とほほのWWW入門
HTML/スタイルシートのリファレンスがあります。タグの説明やスタイルシート(CSS)の説明が分かりやすく書いてあります。
ここを参考にして今までのサンプルソースを改良すれば、かなりすごいページが作れるようになるはず。
(注)HTMLに関する説明は、基本的にHTML4.01というのについて行われています。XHTMLでは使えないタグもあるので気をつけて下さい。
WEB ARCHIVES-XHTML リファレンス
XHTMLのリファレンスサイト。タグの説明とそのタグを使ったサンプルが載っています。

次は見た目にこだわってみよう！

さてこれで、XHTMLの基本的な説明は終了です。 ここまでの説明で、文字・画像・リンク・表・リストが書けるようになっているはずです。
ということで、とりあえずここまででXHTMLの説明は終了です。

まだ色や背景について説明してないじゃないか！と思うかもしれませんが、実はこれらはXHTMLで指定するのではありません。
「文字の色」「背景」についての詳しい説明は次のページで。