HTML講座

手打ちのHTML講座その2 ~表組み編2~

前回は「1月1日」と表示するだけのテーブルを作成しました。

https://lightning-web.com/2019/04/17/%e6%89%8b%e6%89%93%e3%81%a1%e3%81%aehtml%e8%ac%9b%e5%ba%a7%e3%81%9d%e3%81%ae1%e3%80%80%ef%bd%9e%e8%a1%a8%e7%b5%84%e3%81%bf%e7%b7%a8%ef%bd%9e/

↑こんなのですね。

これを見て「なんて素晴らしい表なんだ(恍惚」なんて人はいないでしょう。

こんなもんテーブルなんて使わずに「1月1日」と打つだけで解決してしまいます。

メモ帳ですら解決してしまいます。

3.もうちょっと表らしいものを作りたいんだけど?

では今回はもう少し進んでいきましょう。

前回の続きということで
<table><tr><td>1月1日</td></tr></table>
↑このコードを使用していきます。

3-1.セルに枠線がないとテーブルっぽく見えないよね

 私もそう思います。
では枠線を表示するコードを入力しましょう。
入力するのは<table>の中です。
tableの後ろに半角スペースを明け、border="1"
つまり<table border="1">と入力してみましょう。すると

こうなります。
ちょっとだけ表っぽくなりました。

「border="〇"」の〇は線の太さを意味し、数字が大きければ大きいほど太くなります。

3-2.表なんだから複数の行がないとね

そうですね。

前回の記事で「2-2.<tr>は行の始まり、</tr>は行の終わり。」と書きました。

<tr>が行の始まりで、</tr>が行の終わりならば、今回やるべきことはただ一つ。

</tr>の後にもう一度<tr></tr>以降の記述を繰り返すだけです

<tableb order="1">
<tr><td>1月1日</td></tr>
<tr><td>2月2日</td></tr>
</table>


これを表示すると

こうなります。

同様に繰り返していくことで延々と行が増えていくことになります。

3-3.表なんだから複数の列がないとね

 そうですね。

これも「2-3.<td></td>に書きたい事を書こう!」の応用で、上と同様。

<td>がセルの最初、</td>の最後ならば、やはりこれも

</td>の後にもう一度<td></td>を繰り返すだけです。

<table border="1">
<tr><td>1月1日</td><td>正月</td></tr>
<tr><td>2月2日</td><td>節分</td></tr>
</table>

これを表示すると

こうなるわけですね。

もはや実質表の完成です。

というか表としては既に完成しています。

しかしEXCELやWORDで表を作成した経験でもあれば

もう少し弄りたいと感じる部分があるでしょう。

次回はその辺り踏み込んだ表の作成をしてみましょう。

それでは今回はこれにて。

お疲れ様でした。

1

トレーナーからの呼び方については地の文ではフルネームが多いので、声に出す際の愛称があればそちらを優先して記載します

-HTML講座
-,