箇条書きを利用すると分かりやすくなることがある。
庄内三名瀑
しかし、以下のようなものはどうだろうか。
ラーメン屋めぐり
確かに項目に並んでいるのは分かるが、少しゴチャゴチャした 感は否めない。
主にデータや資料といったものは、表を作成しまとめると 視覚的にもとても読みやすく理解しやすいので、この場合には 表(table)要素を利用すると良い。
| 店名 | 感想 | 食べた後の顔 |
|---|---|---|
| 阿部食堂 | 酒田で初めて食べたラーメン。 | :-) |
| 麺や | こんなラーメンが酒田にもあるのかと吃驚。 | :-) |
| よこはま軒 | 大好きだったのだが、最近は行ってもまた食べたいと思わない。作る人が 変わったらしい。 | :-| |
| 高橋ラーメン | 実は大変混みあっている高橋ラーメン。旨い | :^-) |
この銀色で染められている部分をセルという。このピンク色で染め られている部分を行という。
表を作成する場合、table要素を使う。
<table border="1" summary="この表は庄内のラーメンについて、店名、
感想、食べた後の顔をまとめた表である">
</table>
表にたいする、表題をつけるための要素である その表が何をあらわす表なのか、わかりやすくするよう表題をつける事を薦 める
挿入する位置だが、必ず<table>要素の次に位置するようにしよう。
<table border="1" summary="この表は庄内のラーメンについて、店名、
感想、食べた後の顔をまとめた表である">
<caption>庄内のラーメン</caption>
</table>
先程セルと行について説明したが、それでは行を作成してみよう。 行を作成するには、<tr>と</tr>を書いてやれば良いだけだが、行 を構成する、セルがなければ表にならない。
それでは、先程から作成しているsample.htmlに以下を追加してみよう。body 要素内に書くことを忘れてはならない。
<table border="1" summary="この表は庄内のラーメンについて、店名、感想、
食べた後の顔をまとめた表である">
<caption>庄内のラーメン</caption>
<tr>
<th>店名</th><th>感想
</th><th>食べた後の顔</th>
</tr>
<tr>
<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>
</tr>
</table>
→ 目次