HTML編集って難しい。はてなブログで表を作ってみました。
こんにちは。
マキシマムおじさんです。
ブログを見やすくしたいなぁと思って、いろいろやっています。
ブログで稼ごうと思っているのなら、見やすくするのは大切なことです。
とても苦労しました。備忘録として記事にしておきます。
はじめてのHTML編集の苦労話です。
表を作りたい。その方法は？
先ほど、資産運用の記事を書いていました。
資産運用は３年ほどやっているので、その運用実績をまとめようと思い、１行ずつ「実質投資額」と「リターン」の金額を入力していました。
だけど、ちょっと見づらいなぁと感じました。
表にまとまっていたほうが、絶対に見やすいと思うのです。
そこで、表づくりに挑戦したのでした。
HTMLはよく分からないので、その方法はどうしたらいいものか・・・？
でも、現代はネットに何でも書いています。
いろいろなサイトを見ながらコピーして、確認しての繰り返し・・・・。
①HTML編集を開きます。
②HTMLの画面です。
ここの英語の難しそうなところを編集します。
<p>・</p>が１行ずつを表しています。
あらかじめ「編集見たまま」で改行をしておきます。
すると・・・
<p>・</p>
<p>・</p>
<p>・</p>
<p>・</p> のようになっていると思います。
この<p>・</p>の「・」の部分に表のコードを貼り付けます。
| マキシマム | おじさん | です。 |
| １ | ２ | ３ |
| Ａ | Ｂ | Ｃ |
すると、このような表ができます。
ちなみに、この表のコードは ↓こちらです。
<table>
<tbody>
<tr>
<td align="center" width="120"> マキシマム</td>
<td align="center" width="140">おじさん </td>
<td align="center" width="140"> です。</td>
</tr>
<tr>
<td align="center"> １</td>
<td align="center"> ２</td>
<td align="center"> ３</td>
</tr>
<tr>
<td align="center"> Ａ</td>
<td align="center"> Ｂ</td>
<td align="center"> Ｃ</td>
</tr>
</tbody>
</table>
コードを貼り付けたら、「編集見たまま」に戻り、必要な言葉に書き換えればいいんです。
| ３年目 | 実質投資額 | トータルリターン |
| 2021年10月 | 225万円 | ＋32万円 |
| 2021年9月 | 231万円 | ＋39万円 |
すると、このような表ができます。
こんな表が欲しかったんです。
いろいろなページを見ながらとてもシンプルなものに作り直しました。
それがとても大変でした。
何度も何度も・・・・。
その成果が先ほどのコードです。
ご自由にお使いください。
色とか、線の太さとか変えられますが、マキシマムブログはこのようなシンプルな表でいいんです。
表をアレンジする方法（横幅を変える）
ビフォー
| マキシマム | おじさん | です。 |
| １ | ２ | ３ |
| Ａ | Ｂ | Ｃ |
アフター
| マキシマム | おじさん | です。 |
| １ | ２ | ３ |
| Ａ | Ｂ | Ｃ |
アフターの表は、先ほどのコードを少し変えました。
<td align="center" width="200"> マキシマム</td>
<td align="center" width="80">おじさん </td>
<td align="center" width="80"> です。</td>
「width=" "」の数字を変えたんです。
もともとのコードはこちらです。
<td align="center" width="120"> マキシマム</th>
<td align="center" width="140">おじさん </td>
<td align="center" width="140"> です。</td>
１２０→２００
８０→１４０
８０→１４０
このように「width="120"」の数字を変えると横幅のサイズが変わります。
ここを調整すれば自分で使いやすい大きさにできます。
表をアレンジする方法（列を増やす）
ビフォー
| マキシマム | おじさん | です。 |
| １ | ２ | ３ |
| Ａ | Ｂ | Ｃ |
アフター
| マキシマム | おじさん | です。 | よろしく！ |
| １ | ２ | ３ | ４ |
| Ａ | Ｂ | Ｃ | D |
コードに書き加えました。太字・アンダーラインの部分です。
<table>
<tbody>
<tr>
<td align="center" width="120">マキシマム</td>
<td align="center" width="140">おじさん</td>
<td align="center" width="140">です。</td>
<td align="center" width="140">よろしく！</td>
</tr>
<tr>
<td align="center">１</td>
<td align="center">２</td>
<td align="center">３</td>
<td align="center">４</td>
</tr>
<tr>
<td align="center">Ａ</td>
<td align="center">Ｂ</td>
<td align="center">Ｃ</td>
<td align="center">D</td>
</tr>
</tbody>
</table>
列を増やすには＜td ～＞を増やせばいいんです。
慣れてくるまでは何のことか分からないと思いますが、だんだん分かってくると思います。
この記事を見ているだけでなく、実際にやってみるといいですよ。
表をアレンジする方法（行を増やす）
ビフォー
| マキシマム | おじさん | です。 |
| １ | ２ | ３ |
| Ａ | Ｂ | Ｃ |
アフター
| マキシマム | おじさん | です。 |
| １ | ２ | ３ |
| Ａ | Ｂ | Ｃ |
| α | β | γ |
コードに書き加えました。太字・アンダーラインの部分です。
<table>
<tbody>
<tr>
<td align="center" width="120">マキシマム</td>
<td align="center" width="140">おじさん</td>
<td align="center" width="140">です。</td>
</tr>
<tr>
<td align="center">１</td>
<td align="center">２</td>
<td align="center">３</td>
</tr>
<tr>
<td align="center">Ａ</td>
<td align="center">Ｂ</td>
<td align="center">Ｃ</td>
</tr>
<tr>
<td align="center">α</td>
<td align="center">β</td>
<td align="center">γ</td>
</tr>
</tbody>
</table>
行を増やすには＜tr＞～ を増やせばいいんです。
何だかもう分からない・・・となったら、もう一度前から読み返してください。
無理にたくさんやろうとすると頭が混乱してしまいますので。
マキシマムおじさんもかなりの時間かけて整理しました。
まとめ
HTMLを編集するのは、素人は大変です。
でも、やってみれば何とかなるもの。
マキシマムおじさんも何とかなりました。
今回は、この記事をまとめながらHTMLの表の作り方を覚えました。
勉強ってインプットだけでなく、アウトプットが大事ということを再認識することができました。
今後、ブログを書くとき表を使うときは、このページのコードをコピペしようと思っています。
備忘録として、個人的に何度も使える記事になりました。
最後までお読みいただきありがとうございました。
マキシマムおじさんでした。
_________________________________________
マキシマムブログ ～ カテゴリー
______________________________
多くの情報があります。（ブログ村）
_________________________________________
