読者です 読者をやめる 読者になる 読者になる

キロクのブログ

変わりゆく風景やものを単なる私的思い入れで記録中。意外とのんびりしてられない。

[HTML・CSS]記事に表を挿入する

あんまり使うことはないかもしれないけど、記事の中に表を入れるとき。たとえば、こんな感じの表。

列-A列-B
行-1A-1B-1
行-2A-2B-2
行-3A-3B-3

<tr><th></th><th>列-A</th><th>列-B</th></tr>
<tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
<tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
<tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>

thはいわば見出しの部分で、tdは中身だけど、表の背景色を変えたい部分とそうでない部分を分けています。

見出しの部分の色を変えるにはCSSを使うけど、
ブログ全体としてではなく、この記事のみ(一時的)に反映されるように指定して変更を加えます。
この記事でのみ、この線の太さで、この色でと指定してあげる感じ。

<style type="text/css">
.table3 {
  border-collapse: collapse;
}
.table3 th {
  background-color: #cccccc;
}
</style>

<table class="table3" border=1>
<tr><th></th><th>列-A</th><th>列-B</th></tr>
<tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
<tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
<tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>

つまり、記事毎に違うスタイルの表を入れることができます。
CSSってほんの少し覚えるだけでも、ブログ作りがぐっと楽しく便利になりますね。