<コピペ用>ブログの本文中に表を入れる方法
本文の中に、表を挿入する方法です。
はてなブログだけではなく、他のブログサービスでも同じようにお使いいただけます。
- 1.tableタグで囲います
- 2.tbodyタグを入れます
- 3.tbodyタグにtrを入れます
- 4.trの中にtdを入れます
- 「thead」は認識されないみたい?
- 表の中身にリストを入れる場合
- 他の例
- まとめ
ちなみに、この記事でも軽くご紹介しています。
ただ、スクリーンショットにしていて不便なので(私が)
コピペ用の記事を作ろうと思ったというわけです(キリッ)
ちなみに、表作りに関しては
ドットインストールさんのHTML入門編の#16でも学習しています。
今回は、こんな表を作ってみましょう。
メリット | デメリット | |
早寝 | 健康的 | 夜更かしできない |
夜更かし | 楽しい | 不健康 |
1.tableタグで囲います
まず、「ここに表を作るよ」と示すためにtableタグで囲います。
<table>
</table>
この間に、表を作っていくのです。
2.tbodyタグを入れます
さらに、その中にbodyタグを入れます。
tbodyタグは表の中身をさします。
<table>
<tbody>
</tbody>
</table>
マトリョーシカでいうと、こんな感じです。
なにこれ怖い。
3.tbodyタグにtrを入れます
次は、tbodyタグの中にtr(表のデータ)を入れます。
表の列が3列なので、3列のtrを用意します。
<table>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</tablle>
まだ内容は書いていません。
マトリョーシカでいうと、こんな感じです。
なにこれ内臓かな?
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>
マトリョーシカでいうと、こんな感じです。
もはやマトリョーシカで説明する必然性を感じない。
さて、先ほどのコードを
「html編集画面」にこのコードを貼り付けると、こうなります。
メリット | デメリット | |
早寝 | 健康的 | 夜更かしできない |
夜更かし | 楽しい | 不健康 |
おもしろいですね!
はてなブログでは自動で線が引かれるみたいです。便利ですね。
(ライブドアブログでも自動で線が引かれました。ほかのブログサービスでも試してみてくださいね!)
「thead」は認識されないみたい?
ドットインストールさんでは、表の見出しは「thead」で表すと習ったのですが
この通りに作ってみると、はてなブログではうまくいきませんでした。
どうしてかな?
なので、全てtbodyにしています。
「ほんとうは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>を増やす。
列を増やすときには<tr>の中の<td>を増やす。
これでファイナルアンサー!
さあ!明日からコピペで
元気に表をはってみようーー!
これで便利になった(私が。)