クリスマスギフトは決まった? おすすめギフトはこちら

ライブドアブログで記事に表を入れる方法【スマホでもきれいに表示】

今回はライブドアブログで記事の中に表を入れる方法について紹介します。

記事の中に入れる表というのは例えばこんな感じのものですね。

表題
行A-1行B-1行C-1
行A-2行B-2行C-2
行A-3行B-3行C-3

このような表を入れるにはまず記事を書く画面からHTMLタグ編集画面に切り替えます。

キャプチャ167

そしてこちらのHTMLソースを貼り付けます。

 

<table>
<caption>表題</caption>
<tbody><tr><td>行A-1</td><td>行B-1</td><td>行C-1</td></tr>
<tr><td>行A-2</td><td>行B-2</td><td>行C-2</td></tr>
<tr><td>行A-3</td><td>行B-3</td><td>行C-3</td></tr>

</tbody></table>

これで先ほどのような表を挿入することが出来ます。

ただ一つここで落とし穴が。

これだとPC版では上手く表示されますが、スマホだとこのように上手く表示されません。

S_7562717065868

しゃる

表の外枠が上手く表示されていないね。

これをスマホでも上手く表示させるために先ほどのHTMLソースに少し工夫をします。

 

<table  border=”1px”>
<caption>表題</caption>
<tbody><tr><td>行A-1</td><td>行B-1</td><td>行C-1</td></tr>
<tr><td>行A-2</td><td>行B-2</td><td>行C-2</td></tr>
<tr><td>行A-3</td><td>行B-3</td><td>行C-3</td></tr>
</tbody></table>

tableタグの中にborder=”1px”を追加してあげます。

そうするとスマホでもPC版と同じような表が綺麗に表示されます。

S_7562717091043

しゃる

やった!上手く表示されたね!

記事の中に表を入れる時はぜひ参考にしてみてください。

じゃあね!