【HTML】テーブルの「上を4列」「下を3列」に表示してみるコード

表（table）で、「上を4列」「下を3列」っていうトリッキーなことをする作業があった。

最初「12列作って、上を4列に結合、下を3列に結合でイケるんじゃね？」って思ったのだが・・・。

 

なんだか下の段の中央（Fの幅）がおかしい。

A			B			C			D
E				F				G

<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

 

<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>

 

あとは、線を消したり画像を入れたりすれば完成

ソース

<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>