【HTML】tbodyタグで画像を横並びに

 どうも。

ブログで画像を横並びにする方法です。

画像を横並びで表示させる

意外と需要があると思うけれど、面倒で使わない事が多いのが画像の横並び。

スマホで閲覧することが多くなったので、スクロールで上下に画像が配置されたほうが見やすいのかもしれません。

画像を<tbody>タグで横に並べる

横並びをするには<tbody>タグを使用します。とはいえ、<tbody>タグは<table>タグの子要素になるので<table>タグで囲む必要があります。

<table cellpadding="0" cellspacing="0"><tbody>
<tr>
<td>
ここに画像を貼付け
</td>
<td>
ここに画像を貼付け
</td>
</tr>
</tbody></table>

Bloggerの場合は投稿の編集モードをHTMLモードにして、横並びに画像を表示したい箇所に前述コードを貼り付けます。(テーマではありません、記事単位です。)

"ここに画像を貼付け"にカーソルを合わせて、いつも通り画像を取り込みます。"ここに画像を貼付け"の文言は画像で上書きするなり、別途消すなりしてください。

画像と画像の間のボーダー

画像間のボーダー(枠線)に関する属性を<table>タグに付けています。

border-collapse: collapse;属性を追加

2枚の画像にボーダー(枠線)を共用させます。真ん中に隙間が空いたようになる。

cellpaddingとcellspacing属性追加

cellpadding="0" cellspacing="0"  の様に値を"0"にすると2枚の画像を隙間無く配置しることが可能。

お好みで。

以上