テーブルのレイアウト

以外とHTMLも奥が深いみたい。

widthを100%で指定してあるテーブルに対して
各td要素のwidthを指定していき、
ひとつだけ指定しなかったりすると、
その指定しなかった要素は
勝手に残りの長さになるようです。

例) 真ん中が自動調整
<table width="100%" border="1">
  <tr>
    <td width="10%">10%</td>
    <td>自動調整</td>
    <td width="10%">10%</td>
  </tr>
</table>

実行例↓

10%

自動調整

10%

例) 自動調整と10%の列が交互に出現
<table width="100%" border="1">
  <tr>
    <td width="10%">10%</td>
    <td>自動調整</td>
    <td width="10%">10%</td>
    <td>自動調整</td>
    <td width="10%">10%</td>
    <td>自動調整</td>
    <td width="10%">10%</td>
  </tr>
</table>

実行例↓

10%

自動調整

10%

自動調整

10%

自動調整

10%

例) 長さを指定しないと間延びする
<table width="100%" border="1">
  <tr>
    <td>自動調整</td>
    <td>自動調整</td>
    <td>自動調整</td>
    <td>自動調整</td>
  </tr>
</table>

実行例↓

自動調整

自動調整

自動調整

自動調整