HTML講座

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

  尻合いがホームページを作り始めたので、それを支援する意味でHTML講座でもしようかなと思い投稿してみました。
まず1回目からこの内容で良いのかはわかりませんが、表組みからいきましょう。

1.そもそも表組みってなんだよ

↑こんなやつです。

見ての通り表です。WordやExcelなんかでも書いたりしますよね。
ちょっと手を加えると

↑こんな風にお洒落な配置にも出来ます。(お洒落?)

まぁ真面目にお洒落な表を組もうとするとCSSとかの話になり、その辺になると私もさっぱりですので教えることは不可能なのですが。
(今後CSSの話もしていくつもりではいますが)

しかしながらこの程度でも表を組むのは基本中の基本なので、知識として押さえておいて損はないでしょう。

2.どうやって組むんだよ

 では早速表の組み方の話に入っていきましょう。

あとここからは表のことをテーブル、そして文字が書いてある1つの枠のことをセルと書いていきます。  

まずは「1月1日」と表記するだけのシンプルなものからいきましょう。

2-1.<table>に始まり</table>に終わる。

 テーブルを組むには
<table>と最初に書き、最後に</table>と書きます。
この<table></table>の間に囲まれた部分がテーブルになります。

 

2-2.<tr>は行の始まり、</tr>は行の終わり。

 次に <table></table>の間に<tr></tr>と書きます。

<tr>が一行の最初、</tr>が行の終わりを意味します。

2-3.<td></td>に書きたい事を書こう!

 さて、今度は<tr></tr>の間に<td></td>と書きます。

<td>がセルの最初、</td>の最後、つまり<td>と</td>に囲まれたエリアが1つのセルになります。

今回は「1月1日」と表示するだけですので
<td></td>の間に「1月1日」と書いてみましょう。

2-4. お待たせ!  1月1日と表示するテーブルの完成だ!

 2-1~2-3まで終わると
<table><tr><td>1月1日</td></tr></table>
こんなコードが出来上がると思います。

それではお待ちかね、早速1月1日と表示するテーブルを表示させてみましょう!
まぁもう表示されているんですけどもね。

分り辛いようでしたらもう一度表示しましょう。

 

はい。

いや、実際こんなもんです。
何故なら今やったことは1つのセルに「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%a82%ef%bd%9e/
1

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

-HTML講座
-,