18歳未満の方は入場をご遠慮下さい。

html テーブルの勉強

　私は長年次の形でテーブルを作ってきた。
天地人 70 龍馬伝 0
八重の桜 80 軍師官兵衛 70
花燃ゆ 0 真田丸 90
　外枠は内罫線より少し太く、外枠と内罫線は同じ色にする。
　内罫線は一番細い実線にする。
<DIV ALIGN="center" STYLE="margin-top:6pt;margin-bottom:6pt">
<TABLE BORDER="2" STYLE="width:380px;background-color:#ffffff;border:2px solid #009500;font-size:10.5pt;line-height:15pt;border-collapse:collapse;" CELLPADDING="2">
　　<TR>
　　　　<TD WIDTH="40%">天地人</TD>
　　　　<TD WIDTH="10%" ALIGN="right">70</TD>
　　　　<TD WIDTH="40%">龍馬伝</TD>
　　　　<TD WIDTH="10%" ALIGN="right">0</TD>
　　</TR>
　　<TR>
　　　　<TD>八重の桜</TD>
　　　　<TD ALIGN="right">80</TD>
　　　　<TD>軍師官兵衛</TD>
　　　　<TD ALIGN="right">70</TD>
　　</TR>
　　<TR>
　　　　<TD>花燃ゆ</TD>
　　　　<TD ALIGN="right">0</TD>
　　　　<TD>真田丸</TD>
　　　　<TD ALIGN="right">90</TD>
　　</TR>
</TABLE>
</DIV>
　必ず BORDER="2" とし、STYLE="border:2px solid 色コード;border-collapse:collapse;" を入れた。
　これでサイト内のすべてのテーブルが問題なく整えられたから、さして深く探求しなかった。
　ある時次のことを知って驚いた。
(1) BORDER="2" を削除するか BORDER="0" とすると内罫線が消える。
　　BORDER="4" として外枠を太くしようとしたが効かなかった。→混乱MAX
手元の本を見ると BORDER=" " はピクセル数で外枠の太さを示すものとしている。
BORDER="2" のまま STYLE="border:4px solid #009500 とすると外枠が太くなる。
更に、外枠への指示の border:2px solid #009500で内罫線の色が緑色（#009500）になっている。
私の頭は壮烈に混乱した。
　　となると(1)が一層わからなくなった。内罫線は何から決まるのか。
(2) セル周りの内罫線を太くするには次のようにすれば良いとわかった。
　　<TD STYLE="border-width:2px">軍師官兵衛</TD>
天地人 70 龍馬伝 0
八重の桜 80 軍師官兵衛 70
花燃ゆ 0 真田丸 90
(3) 全ての内罫線を太くしたい場合、<TD> が12ヶあるがその全部に STYLE="border-width:2px" を入れるのは煩雑だ。
　対策は次がある───STYLEでCLASS属性を指定。
<STYLE>
　<!-- .uchiwaku td { border-width:2px; } -->
</STYLE>
<DIV ALIGN="center" STYLE="margin-top:6pt;margin-bottom:6pt">
<TABLE CLASS="uchiwaku" BORDER="2" STYLE="width:380px;background-color:#ffffff;border:4px solid #009500;font-size:10.5pt;line-height:15pt;border-collapse:collapse;" CELLPADDING="2">
　　<TR>
　　　　<TD WIDTH="40%">天地人</TD>
　　　　<TD WIDTH="10%" ALIGN="right">70</TD>
　　　　<TD WIDTH="40%">龍馬伝</TD>
　　　　<TD WIDTH="10%" ALIGN="right">0</TD>
　　</TR>
（以下略）
天地人 70 龍馬伝 0
八重の桜 80 軍師官兵衛 70
花燃ゆ 0 真田丸 90
　　なお、外枠を4pxにした。
(4) 中央の縦線を太くするには次のやり方だ。
　　個々のセルで指定する。
<DIV ALIGN="center" STYLE="margin-top:6pt;margin-bottom:6pt">
<TABLE BORDER="2" STYLE="width:380px;background-color:#ffffff;border:4px solid #009500;font-size:10.5pt;line-height:15pt;border-collapse:collapse;" CELLPADDING="2">
　　<TR>
　　　　<TD WIDTH="40%">天地人</TD>
　　　　<TD WIDTH="10%" ALIGN="right">70</TD>
　　　　<TD WIDTH="40%" STYLE="border-left:2px solid #009500">龍馬伝</TD>
　　　　<TD WIDTH="10%" ALIGN="right">0</TD>
　　</TR>
（以下略）
天地人 70 龍馬伝 0
八重の桜 80 軍師官兵衛 70
花燃ゆ 0 真田丸 90
　この後いろいろ調べて次がわかった。
(A) RULES="cols"を入れると縦列の内罫線のみ表示される。
RULES="rows" にすると横行の内罫線のみ表示する。
<TABLE BORDER="2" RULES="cols" STYLE="width:380px;background-color:#ffffff;border:2px solid #009500;font-size:10.5pt;line-height:15pt;border-collapse:collapse" CELLPADDING="2">
（以下略）
天地人 70 龍馬伝 0
八重の桜 80 軍師官兵衛 70
花燃ゆ 0 真田丸 90
　　html 5 ではRULESは廃止だ。
(B) BORDER="2" をとって内罫線を表示するには次が良いらしい。
<DIV ALIGN="center" STYLE="margin-top:6pt;margin-bottom:6pt">
<TABLE BORDER="2" STYLE="width:380px;background-color:#ffffff;border:2px solid #009500;font-size:10.5pt;line-height:15pt;border-collapse:collapse" CELLPADDING="2">
　<TR>
　　<TD WIDTH="40%" STYLE="border:1px solid #009500">天地人</TD>
　　<TD WIDTH="10%" ALIGN="right" STYLE="border:1px solid #009500">70</TD>
　　<TD WIDTH="40%" STYLE="border:1px solid #009500">龍馬伝</TD>
　　<TD WIDTH="10%" ALIGN="right" STYLE="border:1px solid #009500">0</TD>
　</TR>
　<TR>
　　<TD STYLE="border:1px solid #009500">八重の桜</TD>
　　<TD ALIGN="right" STYLE="border:1px solid #009500">80</TD>
　　<TD STYLE="border:1px solid #009500">軍師官兵衛</TD>
　　<TD ALIGN="right" STYLE="border:1px solid #009500">70</TD>
　</TR>
　<TR>
　　<TD STYLE="border:1px solid #009500">花燃ゆ</TD>
　　<TD ALIGN="right" STYLE="border:1px solid #009500">0</TD>
　　<TD STYLE="border:1px solid #009500">真田丸</TD>
　　<TD ALIGN="right" STYLE="border:1px solid #009500">90</TD>
　</TR>
</TABLE>
</DIV>
天地人 70 龍馬伝 0
八重の桜 80 軍師官兵衛 70
花燃ゆ 0 真田丸 90
(C) 内罫線を表示するために <TD> のすべてに STYLE=" " で指示を入れるのは煩雑だから
<STYLE>
　　<!-- td { border:2px solid #009500; } -->
</STYLE>
　　の通りページの冒頭で指示する。
　　作成例が　次だ。
(D) これによりわかったこと。
　　この全ての内罫線を細くしたい場合
<STYLE>
　　<!-- td { border:1px solid #009500; } -->
</STYLE>
　　とすればよい。
cssの勉強
　htmlファイルで cssの適用方法は次の３種ある。
(1) 個別の要素にSTYLE属性を入れ込んで適用させる。
　これはサイトスタートの時から使っていたと思う。
　例：<DIV STYLE="background:#fff9ff;color:#1100cc;padding:4pt">
　普段は包皮に隠れている弱々しい皮膚を見て、奥まったところにも恥垢が溜まっていないのを確認すると、私は、小学五年生の時、便所でおちんちんの皮がどこまで剥けるのかと試みたことを思い出した。──恥后考
　　個々の適用というのが便利であると共に短所でもある。
(2) 別ファイルに記述してこれを参照して適用させる。
　このサイトでは全ファイルの冒頭に次の一文を置き、スタイルシートとして 1.cssを使っている。
　<link rel="stylesheet" href="../1.css" type="text/css" media="all">
　使い始めたのは2018年と遅い。
　参考：2018年06月14日の日記
　このところモバイル ユーザビリティ対策をやっている。我がサイトは
　　● width:xxem のように幅を固定してレイアウトを整えるのを多用している
　　● 固定幅による表をよく使っている
の二点から狭い画面（スマホ）への対応をあきらめていたが、読者のかたのアドバイスを得て、スタイルシートの学習なんてこの歳になってからは辛いという気持ちを打破し、なんとか必要な改訂をしている。
　これまで対策できなかったのは
──まともな大きさの画面では横幅を48文字で表示し、狭い画面では幅を狭める──
という願いに対応するやり方がよくわからなかったからだ。具体的なスタイルシートの見本を読者のご婦人に作成頂き、それでもって取りかかった。感謝この上もない。
　この 1.cssの記述の３割程度は最近の追加だが、私には難しくてどう書くべきか実に困った。
　特に苦しんだのは次。
table.ue td { vertical-align: top; }
使用例：東熱ｎシリーズの女優01でセルの中身の上揃えを指示
.leftm { padding:2px 0px 4px 6px; }
使用例：ＡＶ女優全集01の動画紹介欄の余白
　　　上2px 右0px 下4px 左6px
(3) ヘッダに記述してそのファイル内で適用させる。
　これがやり方がわからなくて初めて使ったのが2025年になった。
　作成例が　次だ。
　<STYLE>
　　　<!-- td { border:2px solid #009500; } -->
　</STYLE>
内罫線上下右左の幅を2pxにする。
　わかってしまえば何ていうことはないが、本当に理解するのが難しかった。
えろえろ考察　　日記　　秘密の愉しみ　　トップページ
（千戸拾倍　著）