Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

HTMLでかんたんな表を作成

はじめに

 

サイト上で複数の対象物を数値で比較して紹介したいとき、表を作成した方が見やすいと思いましたので、HTMLで表を作成する方法を調べて見ました。

 

やり方が全く分からなかったため、綺麗に描写できていないかもしれません。

 

何卒、ご了承いただけると幸いです。

 

 目次

 参考にしたサイト

 

www.kanzaki.com

 

「HTML 表」と検索をかけて、分かりやすそうなサイトを探して見ました。

 

ものは試しに上で示したサイトを参考に、とあるHTMLをそのままコピペしてみました。

 

 とあるHTMLをそのままコピペ

 

■表示結果

身近な果物

名称 味の特徴
りんご 甘酸っぱい おおむね赤
なつみかん かなり酸っぱいと思う たいてい黄色

 

■HTMLソースコード

<table>
<caption>身近な果物</caption>
<tr>
<th>名称</th>
<th>味の特徴</th>
<th>色</th>
</tr>
<tr>
<td>りんご</td>
<td>甘酸っぱい</td>
<td>おおむね赤</td>
</tr>
<tr>
<td>なつみかん</td>
<td>かなり酸っぱいと思う</td>
<td>たいてい黄色</td>
</tr>
</table>

 

なんだか見た目はいい感じになりました。

 

でも実は、これだけでは実は表の枠線は表示されないようなのです。

 

おそらくはてなブログの仕様で枠がうっすらと表現されているのかもしれません。

 

ここでCSSを利用すると、以下のように変化しました。

 

 CSSを利用した場合

■表示結果

身近な果物
名称 味の特徴
りんご 甘酸っぱい おおむね赤
なつみかん かなり酸っぱいと思う たいてい黄色

 

■HTMLソースコード

<table style="border-collapse: collapse;"><caption>身近な果物</caption>
<tbody>
<tr>
<th style="border: solid 1px; padding: 0.5em;">名称</th>
<th style="border: solid 1px; padding: 0.5em;">味の特徴</th>
<th style="border: solid 1px; padding: 0.5em;">色</th>
</tr>
<tr>
<td style="border: solid 1px; padding: 0.5em;">りんご</td>
<td style="border: solid 1px; padding: 0.5em;">甘酸っぱい</td>
<td style="border: solid 1px; padding: 0.5em;">おおむね赤</td>
</tr>
<tr>
<td style="border: solid 1px; padding: 0.5em;">なつみかん</td>
<td style="border: solid 1px; padding: 0.5em;">かなり酸っぱいと思う</td>
<td style="border: solid 1px; padding: 0.5em;">たいてい黄色</td>
</tr>
</tbody>
</table>

 

枠が黒くなって少し境界線が見やすくなったことが分かります。

 

追加したCSSコードは以下の通り。

 

■<table>内のCSSコード

 

border-collapse: collapse;

 

<table>内のセルが境界線を共有するか分離するかを設定する。

 

"collapse"にしている場合は共有します。

 

私が試したところ、このコードを抜いても境界線のデザインが変わることはありませんでした。

 

つまり、特に指定しない限り境界線を共有する設定になっているようですので、今回の場合は特に指定する必要はなさそうです。

 

■<th>、<td>内のCSSコード

 

border: solid 1px;

 

境界線を1行で1px(1画素)の太さで表示する。

 

padding: 0.5em;

 

余白の幅を設定する。

 

0.5emとは文字幅の半分の大きさの幅を余白としてとります。

 

↑目次に戻る

 

境界線の範囲に関する実験

 

個人的に気になる点がありましたので、少しCSSコードを用いた実験を行ってみようと思います。

 

上のHTMLでは全ての<th><td>タグに境界線を表示するCSSコードを入れているため、境界線が全ての要素に対して描写されています。

 

例えば、"なつみかん"の部分だけ境界線描写のCSSを抜いてみる、または、部分的に境界線描写のCSSコードを入れた場合はどうなるか気になりました。

 

なので以下に、ご参考程度になればと表示結果を載せておきます。

 

 一部のCSSコードを削った場合

 

■"なつみかん"だけ境界線非表示

身近な果物
名称 味の特徴
りんご 甘酸っぱい おおむね赤
なつみかん かなり酸っぱいと思う たいてい黄色

 

■"なつみかん"、"名称"、"色"だけ境界線描写

身近な果物
名称 味の特徴
りんご 甘酸っぱい おおむね赤
なつみかん かなり酸っぱいと思う たいてい黄色

 

 どうやらこの境界線は、一つの要素に対しては「コ」の字を右に90度回転させた、受け箱のような形で表現されているようです。

 

そして一番上の要素の場合は蓋をして全体として境界線で区切っているように見えるという仕組みのようでした。

 

これはおそらく境界線を共有する設定にしているため、このような表現になるのだと思います。

 

あまりないとは思いますが、一つの要素だけを四角の境界線で区切りたい時は、境界線を共有しない設定にする必要があると思います。

 

 境界線を共有しない設定にした場合

 

<table>のCSSコードの

 

style="border-collapse:collapse;"

 

 

style="border-collapse:separate;"

 

に変更します。

 

■境界線を全部表示

身近な果物
名称 味の特徴
りんご 甘酸っぱい おおむね赤
なつみかん かなり酸っぱいと思う たいてい黄色

 

■"なつみかん"だけ境界線非表示

身近な果物
名称 味の特徴
りんご 甘酸っぱい おおむね赤
なつみかん かなり酸っぱいと思う たいてい黄色

 

■"なつみかん"、"名称"、"色"だけ境界線描写

身近な果物
名称 味の特徴
りんご 甘酸っぱい おおむね赤
なつみかん かなり酸っぱいと思う たいてい黄色

 

予想通り、要素ひとつひとつに対して受け箱形ではなく、四角形の境界線が描かれるようになりました。

 

↑目次に戻る

 

まとめ

 

HTMLにおける表の作成の仕方を書いて見ました。

 

参考にしたサイトに頼りきりになってしまいましたが、私なりにタグやコードの調査や、描画における実験をやって見たり、分からないところはなるべく残さないようにしたつもりです。

 

表の中を色で塗りつぶしたり、他にもいろいろなデザインがあると思いますが、HTMLだけで解決しようとすると、コードが見にくくなってしまうと感じました。

 

はてなブログにも、もう少し複雑なCSSを使用する方法がありそうなので、また調べて描いてみようと思います。

 

以上、最後までありがとうございました。