生涯、学習していきたい

いろいろなことを考えるのが好きです。

<コピペ用>ブログの本文中に表を入れる方法

本文の中に、表を挿入する方法です。

はてなブログだけではなく、他のブログサービスでも同じようにお使いいただけます。

f:id:ponnkichi:20180319121253p:plain

 

 

 

ちなみに、この記事でも軽くご紹介しています。

ponnkichi.hatenablog.com

ただ、スクリーンショットにしていて不便なので(私が)

コピペ用の記事を作ろうと思ったというわけです(キリッ)

 

ちなみに、表作りに関しては

ドットインストールさんのHTML入門編の#16でも学習しています。

ponnkichi.hatenablog.com

 

 

  今回は、こんな表を作ってみましょう。

  メリット デメリット
早寝 健康的 夜更かしできない
夜更かし 楽しい 不健康

 

1.tableタグで囲います

まず、「ここに表を作るよ」と示すためにtableタグで囲います。

<table>

</table> 

 この間に、表を作っていくのです。

 

2.tbodyタグを入れます

さらに、その中にbodyタグを入れます。

tbodyタグは表の中身をさします。

<table>

 <tbody>

</tbody> 

</table> 

 

マトリョーシカでいうと、こんな感じです。

f:id:ponnkichi:20180319113438p:plain

なにこれ怖い。

 3.tbodyタグにtrを入れます

次は、tbodyタグの中にtr(表のデータ)を入れます。

表の列が3列なので、3列のtrを用意します。 

 

<table>

<tbody>

<tr></tr>

<tr></tr>

<tr></tr>

 </tbody>

</tablle>

 まだ内容は書いていません。

 

マトリョーシカでいうと、こんな感じです。

f:id:ponnkichi:20180319113637p:plain

なにこれ内臓かな?

4.trの中にtdを入れます

先ほどのtrの中に、td(中身)を入れていきます。

 

<table>

 <tbody>

<tr><td></td><td>メリット</td><td>デメリット</td></tr>

<tr><td>早寝</td><td>健康的</td><td>夜更かしできない</td></tr>

<tr><td>夜更かし</td><td>楽しい</td><td>不健康</td></tr>

</tbody> 

</table> 

 

マトリョーシカでいうと、こんな感じです。

f:id:ponnkichi:20180319113939p:plain

もはやマトリョーシカで説明する必然性を感じない。

 

 さて、先ほどのコードを

「html編集画面」にこのコードを貼り付けると、こうなります。

 

   

  メリット デメリット
早寝 健康的 夜更かしできない
夜更かし 楽しい 不健康

 

 おもしろいですね!

 

はてなブログでは自動で線が引かれるみたいです。便利ですね。

ライブドアブログでも自動で線が引かれました。ほかのブログサービスでも試してみてくださいね!)

 

「thead」は認識されないみたい?

ドットインストールさんでは、表の見出しは「thead」で表すと習ったのですが

ponnkichi.hatenablog.com

この通りに作ってみると、はてなブログではうまくいきませんでした。

どうしてかな?

なので、全てtbodyにしています。

f:id:ponnkichi:20180319113438p:plain

 「ほんとうはtheadもいるんだけどねえ」

という感じ?

 

 

表の中身にリストを入れる場合

表の中身にリストを入れたい場合。

tdの中にこんなのを入れてください。

箇条書きの点が出ます。

<ul>

<li>〇〇</li>

<li>〇〇</li>

<li>〇〇</li>

</ul>

 <li>にはさまれたところ(〇〇のところ)に項目を入れると表になります。

 

 

<table>

<tbody>

<tr><td></td><td>メリット</td><td>デメリット</td></tr>

<tr><td>早寝</td><td>健康的</td><td>夜更かしできない</td></tr>

<tr><td>夜更かし</td><td>楽しい</td><td>不健康</td></tr>

</tbody> 

</table> 

先ほどの「早寝」のメリットのところを増やす場合、

<td>健康的</td>のところをこんなふうに増やしてみましょう。

<td>

<ul>

<li>健康的</li>

<li>お肌にいい</li>

<li>頭すっきり</li>

</ul>

<td>

 を入れてみましょう。

ごちゃごちゃになりますが、全部合わせるとこんな感じになります。

<table>

<tbody>

<tr><td></td><td>メリット</td><td>デメリット</td></tr>

<tr><td>早寝</td>

<td>

<ul>

<li>健康的</li>

<li>お肌にいい</li>

<li>頭すっきり</li>

</ul>

<td>

<td>夜更かしできない</td></tr>

<tr><td>夜更かし</td><td>楽しい</td><td>不健康</td></tr>

</tbody> 

</table> 

 

 

これをHTML編集画面にコピペすると、こんな風になります。 

  メリット デメリット
早寝
  • 健康的
  • お肌にいい
  • 頭すっきり
夜更かしできない
夜更かし 楽しい 不健康

 

 他の例

今までは3×3の表をつくりましたが

他の場合はこんな感じです。

 

2×2

<table>

<tbody>

<tr><td>〇〇</td><td>××</td></tr>

<tr><td>▽▽</td><td>□□</td></tr>

</tbody>

</table>

 これをコピペすると、

 

〇〇 ××
▽▽ □□

 こうなります。

2×3

<table>

<tbody>

<tr><td>1-1</td><td>1-2</td></tr>

<tr><td>2-1</td><td>2-2</td></tr>

<tr><td>3-1</td><td>3-2</td></tr>

</tbody>

</table>

 

1-1 1-2
2-1 2-2
3-1 3-2

こんな感じです。

 

まとめ

行を増やす時には<tr>を増やす。

f:id:ponnkichi:20180319113637p:plain



列を増やすときには<tr>の中の<td>を増やす。

f:id:ponnkichi:20180319113939p:plain

これでファイナルアンサー!

さあ!明日からコピペで

元気に表をはってみようーー!

 

これで便利になった(私が。)