表（table）で、「上を4列」「下を3列」っていうトリッキーなことをする作業があった。
最初「12列作って、上を4列に結合、下を3列に結合でイケるんじゃね？」って思ったのだが・・・。
なんだか下の段の中央（Fの幅）がおかしい。
| A | B | C | D | ||||||||
| E | F | G | |||||||||
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td style="width: 25%;" colspan="3">A</td> <td style="width: 25%;" colspan="3">B</td> <td style="width: 25%;" colspan="3">C</td> <td style="width: 25%;" colspan="3">D</td> </tr> <tr> <td style="width: 33%;" colspan="4">E</td> <td style="width: 33%;" colspan="4">F</td> <td style="width: 33%;" colspan="4">G</td> </tr> </tbody> </table> |
いっそのこと、テーブルを２つ作って、マージン(外側の余白)を0にすればイケる
マージンを0にして、上のテーブルと、下のテーブルの隙間を無くす。これでイケる。（内側の隙間「パディング」はお好みに応じて調整。ここでは上下０、左右15）
※padは「詰める」という意味。中身のスペースを作るときに使う。marginはその反対で「外側」
| a | b | c | d |
| e | f | g |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <table style="border-collapse: collapse; width: 100%; margin: 0px;"><tbody><tr><td style="width: 25%; padding: 0px 15px;">a</td><td style="width: 25%; padding: 0px 15px;">b</td><td style="width: 25%; padding: 0px 15px;">c</td><td style="width: 25%; padding: 0px 15px;">d</td></tr></tbody></table><table style="border-collapse: collapse; width: 100%; margin: 0px;"><tbody><tr><td style="width: 33.3333%; padding: 0px 15px;">e</td><td style="width: 33.3333%; padding: 0px 15px;">f</td><td style="width: 33.3333%; padding: 0px 15px;">g</td></tr></tbody></table> |
あとは、線を消したり画像を入れたりすれば完成
ソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <table style="border-collapse: collapse; width: 100%; margin: 0px;"><tbody><tr><td style="width: 25%; padding: 2px; border-style: hidden;"><img class="alignnone size-full wp-image-8163" src="画像url" alt="" width="178" height="120" /></td><td style="width: 25%; padding: 2px; border-style: hidden;"><img class="alignnone size-full wp-image-8163" src="画像url" alt="" width="178" height="120" /></td><td style="width: 25%; padding: 2px; border-style: hidden;"><img class="alignnone size-full wp-image-8163" src="画像url" alt="" width="178" height="120" /></td><td style="width: 25%; padding: 2px; border-style: hidden;"><img class="alignnone size-full wp-image-8163" src="画像url" alt="" width="178" height="120" /></td></tr></tbody></table><table style="border-collapse: collapse; width: 100%; margin: 0px;"><tbody><tr><td style="width: 33.3333%; padding: 0px 15px; border-style: hidden;"><img class="aligncenter size-full wp-image-8163" src="画像url" alt="" width="178" height="120" /></td><td style="width: 33.3333%; padding: 0px 15px; border-style: hidden;"><img class="aligncenter size-full wp-image-8163" src="画像url" alt="" width="178" height="120" /></td><td style="width: 33.3333%; padding: 0px 15px; border-style: hidden;"><img class="aligncenter size-full wp-image-8163" src="画像url" alt="" width="178" height="120" /></td></tr></tbody></table> |
