HTML ページ内タブに似た動作 < div > と < table >

スマホ版を作っていますが、問題は画面が小さいことです。画面幅が狭いのが問題ですね。昔々の MS-DOS 時代は横幅６４０ピクセルでしたが、それよりも狭い。そこで適当に改行を入れるなどして幅を狭く作るわけですが、大きな（情報量の多い）ページだと当然極端に縦長になってしまいます。そのページにアクセスした人にとって本当に必用な情報はページ内の一部だけである事が殆どなんですが、「必用な情報」が何であるかは場合によって異なるでしょう。ページを分割してもいいんですが面倒。ページ内にあるパラメータは簡単にアクセスできますが、ページをまたがると HTML のパラメータで受け渡さなくてはならなくなります。

ページ内にタブがあって、タブをクリックすると表示内容が変わるページがありますね。そのようなページは「１つのページ」で、部分的に表示、非表示としているんだそうです。これならばページ間でのパラメータの受け渡しは不要。やってみる事にしました。調べてみると

<div id="ID1">タブ１に対応する表示内容</div>

<div id="ID2">タブ２に対応する表示内容</div>

などとし、表示したい物は style display = block、そうでない物は style display = none とすればＯＫのようです。なんだ、簡単じゃないかと思ったのですが・・・
Reclib のＤＢではアライメントのために <table> を多用しています。この方法、今では【推奨されない】そうですが、修正するには工数が大きすぎます。最初にやったのは、適当な位置に <div> </div> を挿入してブロックを作り、それに対して JavaScript で style.display="none" などとする方法です。
<table>

    <div> <tr> <td> </td> </tr>  </div>

    <div> ・・・ </div>

</table>

動かしてみると全くダメ。原因調査のために

<div style="color:red;"><table><tr><td>文字列</td></tr></table></div>

などとやってみましたがダメ。表示される文字列は黒のままで、赤くはなりません。<table><div><tr><td>文字列</td></tr></div></table>　ダメ

<table><tr><div><td>文字列</td></div></tr></table>　これもダメ

<table><tr><td><div>文字列</div></td></tr></table>　これはＯＫ

ググっていたら「DivおよびTableは両方ともブロックレベルの要素です。そのため、ネストすることはできません。」というのが見つかりました。知らなかった、というより、やってみた事がなかった。確かにネストしていますね。でも <td><table>....</table></td> は可能なんです。これもネストしているのでは？？何にしても動かないのではしょうがない。

結局 <table> を分割する事にしました。
<table id="table1">   // タブ１で表示するもの

    <tr> <td> </td> </tr> </table>
<table id="table2">   // タブ２で表示するもの

    <tr> <td> </td> </tr> </table>
などとし、JavaScript で table1, table2 の style display を操作するとＯＫでした。

こんな事は常識かもしれませんが、私にとっては常識ではなかった・・・参考になれば幸いです。