流れに身を任せて流れたら。。。。。。

日々、気になったことを思うがままに気ままに書き綴っています

HTMLで表を作成してみよう!!!!

 

 

覚えるスペイン語の数が少しづつ増えてきたのは嬉しいのですが、

 

が!!!!!

 

 

字が見にくい、

読みにくい。。。。。

 

 

書いている本人ですら読みにくいのであれば、

読んでくださっている方はなおさらだろうなと。。。

 

 

 

そうだ!

表にしてみよう!!!!!と思ったのですが、

どうやって表にすればいいのか分かりません。

 

 

(どうしよう)。。。。と少し悩んだのですが、

もしかしてですよ、

これ、例の『HTML』とやらで

どうにかならないのか?????と思い、

ちょっと検索してみると、、、、、

 

 

見つけました!

初心者向けの表の作り方!!!

 

 

よしよし♪

これを真似すればいいよね(^^♪と楽観的に考え、

書いてある通りに書いたらですよ。。。

 

 

表にならない(´;ω;`)ウッ…

なんで。。。。。。。。。。。?

 

 

5分ほど格闘の末、出来た表がこちらです。

 

 
  スペイン語 日本語
1. otoño

 

 

 

私の人生で初のHTMLで書いた表です(*^-^*)

もう嬉しくて感動です。

 

HTMLってすごいですね。

こんなことが出来るんですね。

 

 

プログラムに詳しい方、

仕事にしている方からすれば、

(これくらいで何を大げさな。。。。)と思うようなレベルですが、

 

 

ど素人の私的には、

やっとこさ出来た表です。

 

 

1度で表にならず、

何度もやり直し、

(なんで出来ないの!?)と焦ったりイラッとしたり、

数分の間に色々なドラマがあり(;^ω^)

やっと出来た表なので、

嬉しくて仕方がないのです(´;ω;`)ウッ…

 

 

それにしても、頭が疲れた。。。。

 

 

  

下記のコードを書くと、

 

f:id:corento:20180309120852p:plain

 

 

下記の表が出来ます。

 

   スペイン語 日本語
1. otoño

 

 

 

こんな簡単な物に、なぜ5分もかかったのか。。。

 

 

----------------------------------------------------------------------

ミスその1.

 

記入する開始タグと終了タグを、

完全に間違えていた。。。

 

 

こう書いたら、

f:id:corento:20180309124214p:plain

 

 

こうなりました。

 

f:id:corento:20180309121540p:plain

 

 ※これのダメなところは、

 

<th></th>』と書くべきところを、

<tr></tr>』と書いていたのです。

 

 『 h 』と『 r 』、

たった一文字の違いですが、

機械はとっても正確です。

 

 

(なんとなく)、

(空気を読む)なんてことはしてくれません。

 

h 』は『 h 』であって、

r 』は、『 r 』でしかないのです。

 

 

そうか、そうか、

<tr></tr>』で囲んで、

表にしたい部分は、『<th></th>』で囲むんだな。

 

では、書き直していざ!!!!!!

 

と思いましたが、

こう書き直しても、

 

f:id:corento:20180309121309p:plain

 

結局、これです。

表になりませんでした。。。

 

f:id:corento:20180309121540p:plain

 

なんで??????

少し、途方に暮れだしました。。。

 

 

 

------------------------------------------------------------------

ミスその2.


<table border="3"></table>

 

この、『表を作りますよ』という指示のコードを書いていなかったのです。

 

この、とっても大切なテーブル指定コードなしで

こんな風に書くと。。。

 

f:id:corento:20180309121309p:plain

 

⇓ このように、ただの行になってしまいます。

 

 

f:id:corento:20180309121540p:plain

 

 

何が悪いのか。。。

一生懸命、見本と自分が書いたコード(ソース)を見比べていて、

<table border="3"></table> 』を書いていないことを発見!

 

『<table border="3"></table>』を書けばいいのね!と思い、

(じゃあ、次は大丈夫)とルンルン気分で書いたら、

またダメでした。。。。

 

 

 

 

 

 

 

---------------------------------------------------------------------------------- 

ミスその3.

 

 こう書いたら、

 

 f:id:corento:20180309121959p:plain

 

 こうなりました。。。

 

(表になっていない)。。。。。。

また失敗。。。。。。。。。。。

 

f:id:corento:20180309121540p:plain

     

 なぜかと言うと、

 

<table border="3"></table>』で表にしたい部分を

囲っていないからなんです。

 

 

<table border="3">』で、

 (ここから表にしますよ)

 

</table>』で、

 (この直前に書かれている物まで表にしますよ)

 

 

 f:id:corento:20180309121959p:plain

 

 

これだと、表にしたい部分が、

一切『<tabele>』コードで囲われていないからダメだったんです。

 

 

で、下記のように<table></table>で囲ったら、

無事に表になったのです!!!

 

 

下記のようにしたら、

f:id:corento:20180309120852p:plain

 

 

やっと、見本通りの表が出来ました!(^^)!

 

  スペイン語 日本語
1. otoño

 

 

 

たった、これだけのことに5分もかかってしまったんです。

情けないですね、ダメですね。。。

 

(私はやっぱりプログラムは向いていないんだ)と

5分の間に、いったい何度心が折れたことか。。。(´;ω;`)ウッ…

 

 

まぁ、結果、出来たので

とりあえず良かった良かった(-_-;)

 

 

 

そして、これですが、

  スペイン語 日本語
1. otoño

 

なんだか、小さい。

そして、文字の間隔がなくて、

見にくい!!!!!

 

 

1つ1つのマスの間隔が狭くないか???

どうやって広げるんだ??

広げるための『タグ』というものがあるのか????と思いきや、

間隔を広げるのは、

キーボードのスペースキーを押せばいいだけだったのです。

 

 

この表の中のスペースを作りたい部分にカーソルを合わせて、

  スペイン語 日本語
1. otoño

 

 

キーボードの『スペースキー』を押すと。。。

 

 

f:id:corento:20180309125335p:plain

 

これが、

  スペイン語 日本語
1. otoño

 

 

こんな風に見やすく変化するのです(*^-^*)

 

      スペイン語       日本語  
 1. otoño

 

 

 

 

やりましたよ!(^^)!

プログラム知識ゼロ、

パソコンなどの機械類完全音痴の私にも出来ました(^^♪

 

 

何度も心が折れたけど、

諦めずにやり続けて良かった(´;ω;`)ウゥゥ

 

 

さて、スペイン語の単語ページ、

見にくくなってきたので、

この表作成タグを使って、

見やすい単語表を作りたいと思います(^^)/

 

 

今日は表作りで疲れたので(^-^;

スペイン語単語勉強は、眺めるだけにして、

まとめるのは明日にしようと思います。。。

 

 

----------------------------------------------------------------------

■まとめ

 

 

f:id:corento:20180309130048p:plain

 

 

上記のコードを書くと、

これが出来る。

  スペイン語 日本語
1. otoño

 

 

キーボードの『スペースキー』を押すと、

下記のように、文字の間に間隔をつけることが出来る。

 

 

      スペイン語       日本語  
 1. otoño