そろそろアレな世代の話をしようか

氷河期世代の一人が世間の隅っこで色々と書くブログ

簡単にHTMLで表をカスタマイズ

 HTMLとは

f:id:pomu2019:20200415234226j:plain

 HTMLはHyper Text Markup Languageの略です。

何のことだ!?と思う人もいると思いますが、ウェブサイトを作るための基本的な言語の事です。

ホームページやブログなど、身近なところで多く使われています。

はてなブログでも編集できるようになっており、「HTML編集」をみるとHTMLで書かれた裏側を見ることができます。そして編集する事ができます。

エクセルやGoogleドライブで作ったデータをエクセルシートをHTMLテーブルに変換しちゃう君 (ββ)を使って表の形をしたHTMLを作ることができます。

それを利用して、ブログ用にカスタマイズするやり方を書いていきたいと思います。

何故THMLを使ってカスタマイズするのか

 ツールによって作成されたHTMLは、そのままブログに使うことができます。

PCやタブレットスマートフォンで見ても形や色が崩れないので、大変便利です。

しかし項目の色を変えたり、文字の大きさを変えたりした方が、ブログにしっくりくると感じることも。

細かなカスタマイズをすることで、ブログ全体を整えるのと見やすくするために役に立ちます。

HTMLでカスタマイズしてみよう

 HTML、カスタマイズと聞くと難しいと思うかもしれません。

実際やってみると簡単です。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)で作成されたHTMLをそのまま貼り付けてみました。

a b
1 3
2 4

<上の表のHTML>

<style>

<!-- 表全体の設定 -->
table {
border-collapse: collapse;
}

<!-- 表のヘッダの設定(見出し部分) -->
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}

<!-- 表の行列の設定(値の部分) -->
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>

<!-- 表の形と値 -->
<table>
<thead>
<tr>
<th>
a
</th>
<th>
b
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
1
</th>
<td>
3
</td>
</tr>
<tr>
<th>
2
</th>
<td>
4
</td>
</tr>
</tbody>
</table>

実際に目にするときは表だけですが、このようなHTMLがブログにかかれています。

カスタマイズ方法

 ここではstyle内で全体の設定を行っています。

テーブル全体に関する事ならtable{}の中に書き込みます。

見出し項目に関する事なら、th{}の中に書き込みます。

背景を赤色にするなら

th {
border: solid 1px #666666;
color: #000000;
background-color: red;
}

調整に使えるタグ

表の調整でよく使うであろうタグをまとめてみました。

実際はもっと調整できる要素があるので、検索してみるのをおすすめします。

タグ 意味 設定値
border-collapse 枠の設定 separate(分離した枠) border-collapse: callapse
 callapse(分離してない枠)
 border-style  枠線の種類設定  none(枠線無し)  border-style: solid
 hidden(枠線無し)
 solid(実線)
double(2重線)
border-color 枠の色 16進数かカラーネーム border-color: red
width 幅の設定 pxか% width: 300pc
height 高さの設定 pxか% height: 200px
background-color 背景色 16進数かカラーネーム background-color: #cd5c5c
color 文字の色 16進数かカラーネーム color: #ffff00

 

表の形がうまく作れない、結合があるなら

 HTMLで表の形から作る時、表の形だけ最初に欲しい時。

そんな時に便利なツールがあります。

https://tabletag.net/ja/

表のレイアウトを自在に作れます。

結合などがあるとき、便利です。

表のレイアウトだけ作っておいて、値を該当箇所に入れていく手段も便利です。

 

スポンサーリンク


プライバシーポリシー お問い合わせ