ホームページでよく見かける一覧表のようなもの。
こんな感じのもの。
一覧表 | 見出し１ | 見出し２ | 見出し３ |
項目１ | １１ | １２ | １３ |
項目２ | ２１ | ２２ | ２３ |
項目３ | ３１ | ３２ | ３３ |
というふうに表示させる方法のお話です。
◆
これには<table>タグを使います。
<table></table>で囲まれた範囲を表にしてくれます。
例によって百聞は一見にしかず。
こちらを見てください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>このぺーじのタイトル </title>
</head>
<body>
<table border="2">
<tr><td>１</td><td>２</td></tr>
</table>
</body>
</html>
|
これを実際に表示するとこんな感じとなります。
<table></table>で囲まれた中にいろいろと書かれています。
その中にさらに<tr></tr>で、囲まれた部分がありますね。
その中身は、<td>１</td>と<td>２</td>です。
そして、実際には<td></td>で囲まれた１と２が表に書き表されます。
まだ、ちょいとわかりにくいかもしれません。
次を見てください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>このぺーじのタイトル </title>
</head>
<body>
<table border="2">
<tr><td>１</td><td>２</td><td>３</td></tr>
</table>
</body>
</html>
|
<td>３</td>を加えました。
するとどうなるか？
表の項目が３つになりました。
このように、表の項目を横に増やすには、<td>表示の中身</td>を付け加えていけばいいのです。
では、縦に増やしたいときは？
これを見てください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>このぺーじのタイトル </title>
</head>
<body>
<table border="2">
<tr><td>１</td><td>２</td><td>３</td></tr>
<tr><td>１</td><td>２</td><td>３</td></tr>
</table>
</body>
</html>
|
というふうに、<tr></tr>で、囲んだものを付け足します。
実際に表示すると？
それぞれの<tr></tr>の中に含まれる<td></td>の数は同じでなければいけません。
ところで、border="2"というのは、線の太さを表しています。０以上の正数で指定します。
border="0"のときは、線がないということになります。
では、このページのまとめとして、いろいろな表を載せておきます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=X-SJIS">
<title>このぺーじのタイトル </title>
</head>
<body>
<table border="2">
<tr><td>１</td><td>２</td><td>３</td></tr>
<tr><td>１</td><td>２</td><td>３</td></tr>
</table>
<table border="0">
<tr><td>１</td><td>２</td><td>３</td></tr>
<tr><td>１</td><td>２</td><td>３</td></tr>
</table>
<table border="5">
<tr><td>あいうえお</td><td>かきくけこ</td><td>さしすせそ</td></tr>
<tr><td>たちつてと</td><td>なにぬねの</td><td>はひふへほ</td></tr>
</table>
</body>
</html>
|
実際に表示
★<td></td>の代わりに<th></th>を使うことも出来ます。
<th></th>の中は、太い文字、中央揃えで表示されます。
１１．ＨＴＭＬでホームページを作る。表の設定<table>
ＰＣ−ＰＡＲＫトップに戻る
心の話サイコロＴｏｗｎ！へ