MENU

【HTML】tableのセルの数は異なるが行の長さを一定にする方法

HTMLのtableは非常に便利なのですが行ごとのセルの数が異なるとき見栄えが悪くなることがあります。

たとえば、このような表を考えてみます。

くだもののセルは2

さかなのセルは3

やさいのセルは4

になっています。

<table border="1">
 <tr>
  <th>くだもの</th>
 </tr>
 <tr>
  <td>りんご</td>
  <td>みかん</td>
 </tr>

 <tr>
  <th>さかな</th>
 </tr>
 <tr>
  <td>イワシ</td>
  <td>まぐろ</td>
  <td>さば</td>
 </tr>

 <tr>
  <th>やさい</th>
 </tr>
 <tr>
  <td>にんじん</td>
  <td>きゃべつ</td>
  <td>トマト</td>
  <td>はくさい</td>
 </tr>
</table>

これを表示してみると下記の図のようになります。

このようになるのは、tableのセルは行ごとに左端から詰めて表示されるためです。

ですが、このような表は見にくくなります。

このような時どうするか?

tableタグにはセルの結合という便利な道具があります。

そして、このように行ごとのセルの数が異なるときは、そのセルの数の最小公倍数を行のセルの数と考えると解決します。

今回は、2,3,4なので12が最小公倍数になります。

なので各行のセルの数を12と考えましょう。

thの行は、1個しかないので、12個全部を結合します。

くだものの各データは、りんごとみかんの2つなので、一つを6のセルを結合して、6が2つと考えます。

魚の場合は、イワシ、まぐろ、さばの3つありますので、一つは4つのセルを結合すればいいことになります。

やさいは4つのデータがありますので、一つごとに見ると3つのセルを結合すればいいことになります。

すると、下記のようなコードになります。

<table border="1">
 <tr>
  <th colspan="12">くだもの</th>
 </tr>
 <tr>
  <td colspan="6">りんご</td>
  <td colspan="6">みかん</td>
 </tr>

 <tr>
  <th colspan="12">さかな</th>
 </tr>
 <tr>
  <td colspan="4">イワシ</td>
  <td colspan="4">まぐろ</td>
  <td colspan="4">さば</td>
 </tr>

 <tr>
  <th colspan="12">やさい</th>
 </tr>
 <tr>
  <td colspan="3">にんじん</td>
  <td colspan="3">きゃべつ</td>
  <td colspan="3">トマト</td>
  <td colspan="3">はくさい</td>
 </tr>
</table>

このように書くと下記のような図になります。

このようにtableの大枠にピッタリおさまった図になります。

表面からはわからないですが、この各行は12のセルがあります。

それをそれぞれの行の中に表示するデータの数に応じて適宜結合しているというわけです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次