トップ > はじまりの村（初級エリア） > §-6 ATK25の魔法：テーブルにキッチリ整理整頓 【HTML】table、tr、th、td

 
§-6 ATK25の魔法：テーブルにキッチリ整理整頓 【HTML】table、tr、th、td
 

§-6 ATK25の魔法：
テーブルにキッチリ整理整頓
【HTML】table、tr、th、td

多少強引だが何か問題でも？
頻繁に使うからしっかり覚えろよ。

table（テーブル）に隙間を作るな！trにはth,tdでキッチリ整理整頓。

それでは、初級エリア最後の魔法、その名も「ATK25の魔法」だ。

赤とか青とか白とか緑とかチャンスとかは関係ないぞ。

<table border="1">
<tr><th>レベル</th><th>覚える魔法</th><th>使うMP</th></tr>
<tr><td>3Level</td><td>ホイム</td><td>2</td></tr>
<tr><td>10Level</td><td>ベホイム</td><td>8</td></tr>
<tr><td>15Level</td><td>ベギラモ</td><td>12</td></tr> 
</table>

【魔法効果】

レベル覚える魔法使うMP
3Levelホイム2
10Levelベホイム8
15Levelベギラモ12

多少ブラウザによって見え方が違うかもしれないが……。
今、唱えたのは4行（横）×3列（縦）のサイズのテーブルだ。

もちろんそのまま覚えても使える。
しかし、表は、その時その時によって、行と列の数が違う。
少し複雑だけど、なるべく簡単に説明するぞ。

使うのは<table>、<tr>、<th>、<td>だ。
――4つ出てきている時点で嫌になるよな。

疲れたらいつでも休憩しろよ。また帰ってくればいいんだからな。

役割としては、
<table>…最初と最後にこれで挟むだけ
――tableタグは、1つの表で1回しか出てこない。もちろん最後は閉じタグになるから</table>スラッシュが入るぞ。border=”1″は忘れろ。そのままかけばいいぞ。
<tr>…横一列をこれで挟む――<tr>の数だけ行（横の段数）があるぞ
<th>…このパネルは見出し扱いだ――太字になる
<td>…それ以外のデータはこのタグで挟む――簡単だ

<table border=”1″>
<tr><th>レベル</th><th>覚える魔法</th><th>使うMP</th></tr>
<tr><td>3Level</td><td>ホイム</td><td>2</td></tr>
<tr><td>10Level</td><td>ベホイム</td><td>8</td></tr>
<tr><td>15Level</td><td>ベギラム</td><td>12</td></tr>
</table>

特別に色づけしてやったぞ。
これ見ると一目瞭然だ。

わからなくなったら、何回でも見に来いよ。

行を増やしたい時は<tr>～</tr>を増やせばいくらでも増やせる。

注意として、横の数は上から下まで同じにすること。

<th>や<td>の数を合わせるってことだな。
さきほどの表だと一番上が<th>3つで、二番目～四番目は<td>が3つで揃ってるんだ。

さらにレベルアップしたい人向け

ここからは遊び人は読まなくてもいいぞ。
まあ、『もうちょっとレベルアップしたいヤツ』と『谷原章介さんと加藤明子さんのファン』は読んでいいぞ。

横と縦を行（ぎょう）と列（れつ）と呼ぶことを覚えておくといい。
行を漢字で書くと横棒二本かくから横は「行」、
列を漢字で書くと縦棒二本かくから縦は「列」とか、覚え方は色々ある。

ここからは、パネルをつなげたい時の唱え方を教えるぞ。

先ほどの例でいうと、4行で3列の表になっていたが、例えばこの1行目を全てつなげたい時などに使えるぞ。

<table border="1">
<tr><th colspan="3">レベルと覚える魔法と使うMP</th></tr>
<tr><td>3Level</td><td>ホイム</td><td>2</td></tr>
<tr><td>10Level</td><td>ベホイム</td><td>8</td></tr>
<tr><td>15Level</td><td>ベギラモ</td><td>12</td></tr> 
</table>

横につなげたい時はcolspan（column span：コルスパン）で縦につなげたい時はrowspan（row span：ロウスパン）だ。
<tr>や<table>にはつかないからな。

あとは、何個分つなげたいかを<th>や<td>に指定してやる。
そしてつなげた分の<th>や<td>は削除するぞ。
一行目の<th></th>が一つしか無いのがわかるだろ。

これも「そういえばこのやり方あったなーっ」て覚えておくだけでいいぞ。いつだってカンニングしに戻ってくればいいんだからな。

∽∽──────∽∽
白猫
∽∽──────∽∽

…………。

そのまま前を向いたままで聞いて。

そろそろ実際に魔法が使えるか試したくなったって顔してるわよ。

大丈夫よ。パソコンで見ているなら、最初から入っている「メモ帳」でも試せるわ。

この呪文をコピーして、メモ帳に貼りつけてみて。
魔法を使うための呪文よ。

メモ帳に貼りつけたら、ファイル名を「leopard.html」にしてデスクトップに保存して。

そして、そのファイルを開いたままのGoogle chromeにドラッグ&ドロップすればOKよ。画面に私からのメッセージだけ表示されたら成功よ。

◆魔法を使うための呪文ここから◆

<!doctype html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>魔法を使う</title>
<body>

私からのメッセージ：<br>ここに自由に書き込めるわ

</body>
</html>

◆ここまでコピー◆

どう？うまく表示されたかしら？

うまく表示されなかったら、何かの手順が違うのかも……。

あきらめないで。
そのまま使えるファイルを置いておくわ。

私が立ち去ったら静かにダウンロードしてちょうだい。

ここからファイルをダウンロードできるわ

猫にも飽きたし、ペット用のヒョウにでもなろうかしら。

それじゃ、遊び人さん。
アイリスにもよろしくね。

色々と詰め込んだが、よく頑張ったな。
教えれば教えるほど伸びる遊び人だったのでついつい長くなった。

何度も言うが今は全部を覚える必要はない。
カンニングすればいいのだ。