表を作成するなら<table>タグを使用するのが簡単です。
しかしBloggerブログでは記事本文に別途のCSSがないため、凝ったデザインにすることができません。
ですが、CSSなしHTMLのみでもそれなりの表を作成することは可能です。
本記事ではCSSなしでHTMLだけで表を作成する方法を解説します。
Bloggerブログ以外でも使用可能ですよ。
tableタグの基礎
先ずは基本の<table>タグでつくった表です。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
</tbody>
</table>
これに線（border）を追加すると以下のようになります。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
</tbody>
</table>
ここに色を付けたりといった軽いデザインを加えることによって、実用的な表を作成していきます。
表のデザイン
上記の表では見栄えが良くないため、見やすい表にデザインしていきましょう。
色の指定
基本の<table>タグでつくった表は、ブログで指定された背景色や文字色になっています。
先ずは、色の指定から行いましょう
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="1" cellpadding="0" cellspacing="0" style="background-color: white; color: black;">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
</tbody>
</table>
styleでbackground-color（背景色）とcolor（文字色）を指定できます。
上記では背景色を白（white）、文字色を黒（black）に指定しています。
好きなカラーコードをご指定ください。
余白
余白がないとキツキツで見にくい表になってしまうため、余白の指定を行いましょう。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black;">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
</tbody>
</table>
cellpaddingに数値を入れることで、余白をつくることができます。
値が大きければ大きいほど、余白も大きくなります。
セル間の余白
データの量が多く複雑化した際は、セル間に隙間を設けることでスッキリとした表示に見せることができます。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="1" cellpadding="8" cellspacing="5" style="background-color: white; color: black;">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
</tbody>
</table>
cellspacingに数値を入れることで、セル間に余白をつくることができます。
値が大きければ大きいほど、セル間の余白も大きくなります。
線の太さ・色
線の太さや色を指定することができます。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="5" cellpadding="8" cellspacing="0" style="background-color: white; border-color: skyblue; color: black;">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
</tbody>
</table>
borderに数値を入れることで、線を太くできます。
styleのborder-colorで色の指定が行えます。
上記ではskyblueに指定してあります。お好みのカラーコードを指定してください。
表全体の幅
表全体の幅を指定することができます。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 360px;">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
</tbody>
</table>
styleでwidth（幅）を指定できます。
上記では360pxと指定しています。
100%などパーセンテージでも指定が可能です。
見出しの背景色
見出しの背景色のみ指定することも可能です。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 360px;">
<thead>
<tr style="background-color: skyblue;">
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
</tbody>
</table>
見出し部分にstyleでbackground-color（背景色）の指定をしています。
上記ではskyblueに指定してあります。お好みのカラーコードを指定してください。
データ部分の背景色
データ部分の背景色のみ指定することも可能です。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
| データ７ | データ８ | データ９ |
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 360px;">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr style="background-color: lightgrey;">
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr style="background-color: darkgrey;">
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
<tr style="background-color: lightgrey;">
<td>データ７</td>
<td>データ８</td>
<td>データ９</td>
</tr>
</tbody>
</table>
データ部分にstyleでbackground-color（背景色）の指定をしています。
上記ではlightgreyとdarkgreyが交互になるように指定してあります。お好みのカラーコードを指定してください。
データの一部の背景色
上記の応用で、データの一部のみに背景色を指定することもできます。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 360px;">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td style="background-color: gold; color: red;"><b>データ５</b></td>
<td>データ６</td>
</tr>
</tbody>
</table>
データ５の部分にstyleでbackground-color（背景色）とcolor（文字色）の指定をしています。
更に<b>タグで太字に指定し、強調させています。
表の作成方法
行や列の追加など、表の中身を作成していきましょう。
行・列の追加
| 見出し１ | 見出し２ | 見出し３ | 見出し４ |
|---|---|---|---|
| データ１ | データ２ | データ３ | データ４ |
| データ５ | データ６ | データ７ | データ８ |
| データ９ | データ10 | データ11 | データ12 |
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 100%;">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
<th>見出し４</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
<td>データ４</td>
</tr>
<tr>
<td>データ５</td>
<td>データ６</td>
<td>データ７</td>
<td>データ８</td>
</tr>
<tr>
<td>データ９</td>
<td>データ10</td>
<td>データ11</td>
<td>データ12</td>
</tr>
</tbody>
</table>
見出しは<th>タグで、それ以外は<td>タグで追加が行えます。
列（縦）の見出し
行（横）の見出しだけでなく、列（縦）にも見出しを付けることが可能です。
| 見出し１ | 見出し２ | 見出し３ | |
|---|---|---|---|
| 見出しＡ | データ１ | データ２ | データ３ |
| 見出しＢ | データ４ | データ５ | データ６ |
| 見出しＣ | データ７ | データ８ | データ９ |
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 480px;">
<thead>
<tr>
<th></th>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<th>見出しＡ</th>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<th>見出しＢ</th>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
<tr>
<th>見出しＣ</th>
<td>データ７</td>
<td>データ８</td>
<td>データ９</td>
</tr>
</tbody>
</table>
見出しにしたい部分を<th>タグにすることで、どこでも見出しにすることが可能です。
表のタイトル
表にタイトル（名称）を加えることが可能です。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | データ３ |
| データ４ | データ５ | データ６ |
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 360px;">
<caption style="color: gold;">
表.サンプル
</caption>
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
</tr>
</tbody>
</table>
<caption>タグで表にタイトル（名称）を追加できます。
上記では分かりやすいよう、styleでcolor（文字色）をgoldに指定してあります。
表のフッター（合計値や平均値など）
表の終わりを合計値や平均値にしたい場合、<tfoot>タグを用います。
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| データ１ | データ２ | 1,000 |
| データ３ | データ４ | 2,000 |
| 合計値 | 3.000 | |
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 360px;">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
<th>見出し３</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td style="text-align: right;">1,000</td>
</tr>
<tr>
<td>データ３</td>
<td>データ４</td>
<td style="text-align: right;">2,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">合計値</th>
<td style="text-align: right;">3.000</td>
</tr>
</tfoot>
</table>
<tfoot>タグを使い、colspan="2"でセル２つの結合を指定しています。
また、数値は右寄せの方が見やすいためstyle="text-align: right;"を指定をしています。
組み合わせ例
上記を組み合わせ、応用も加えた例をいくつか掲載しておきます。
組み合わせ例①
| 見出し１ | 見出し２ | 数値 | |
|---|---|---|---|
| 見出しＡ | データ１ | データ２ | 100 |
| 見出しＢ | データ３ | データ４ | 200 |
| 見出しＣ | データ５ | データ６ | 300 |
| 平均値 | 200 | ||
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 100%;">
<caption style="color: white;">
表1.組み合わせ例①
</caption>
<thead>
<tr style="background-color: skyblue;">
<th style="background-color: grey;"></th>
<th>見出し１</th>
<th>見出し２</th>
<th>数値</th>
</tr>
</thead>
<tbody>
<tr>
<th style="background-color: pink;">見出しＡ</th>
<td>データ１</td>
<td>データ２</td>
<td style="text-align: right;">100</td>
</tr>
<tr>
<th style="background-color: pink;">見出しＢ</th>
<td>データ３</td>
<td>データ４</td>
<td style="text-align: right;">200</td>
</tr>
<tr>
<th style="background-color: pink;">見出しＣ</th>
<td>データ５</td>
<td>データ６</td>
<td style="text-align: right;">300</td>
</tr>
</tbody>
<tfoot style="background-color: lightgrey; color: red;">
<tr>
<th colspan="3">平均値</th>
<td style="text-align: right;">200</td>
</tr>
</tfoot>
</table>
組み合わせただけでも、ちゃんとそれなりの表を作成することができました。
組み合わせ例②
| 見出し１ | 見出し２ | 数値 | |
|---|---|---|---|
| 副見出し2-1 | 副見出し2-2 | ||
| データ１ | データ２ | データ３ | 100 |
| データ４ | データ５ | データ６ | 200 |
| データ７ | データ８ | データ９ | 300 |
| 合計値 | 600 | ||
<table border="1" cellpadding="8" cellspacing="2" style="background-color: white; color: black; width: 100%;">
<caption style="color: white;">
<b>表2.組み合わせ例②</b>
</caption>
<thead style="background-color: gold;">
<tr>
<th rowspan="2">見出し１</th>
<th colspan="2">見出し２</th>
<th rowspan="2">数値</th>
</tr>
<tr>
<th>副見出し2-1</th>
<th>副見出し2-2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>データ３</td>
<td style="text-align: right;">100</td>
</tr>
<tr>
<td>データ４</td>
<td>データ５</td>
<td>データ６</td>
<td style="text-align: right;">200</td>
</tr>
<tr>
<td>データ７</td>
<td>データ８</td>
<td>データ９</td>
<td style="text-align: right;">300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合計値</td>
<td style="text-align: right;">600</td>
</tr>
</tfoot>
</table>
応用で、2行目に副見出しを作成してみました。
簡単に説明すると、rowspanはセルをいくつの行に広げるかを示し、colspanはセルをいくつの列に広げるかを示しています。
説明しても分かりにくいと思うので、次の例も参考にしてみてください。
組み合わせ例③
| 見出し１ | 見出し２ | ||||
|---|---|---|---|---|---|
| 見出しＡ | 副見出しA1 | データ１ | データ1-1 | データ２ | データ2-1 |
| 副見出しA2 | データ1-2 | データ2-2 | |||
| 副見出しA3 | データ1-3 | データ2-3 | |||
| 見出しＢ | 副見出しB1 | データ３ | データ3-1 | データ４ | データ4-1 |
| 副見出しB2 | データ3-2 | データ4-2 | |||
| 副見出しB3 | データ3-3 | データ4-3 | |||
<table border="1" cellpadding="8" cellspacing="0" style="background-color: white; color: black; width: 100%;">
<caption style="color: yellow;">
表3.組み合わせ例③
</caption>
<thead>
<tr style="background-color: darkgreen; color: white;">
<th colspan="2"></th>
<th colspan="2">見出し１</th>
<th colspan="2">見出し２</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" style="background-color: lightgreen;">見出しＡ</th>
<th style="background-color: lightgreen;">副見出しA1</th>
<td rowspan="3">データ１</td>
<td>データ1-1</td>
<td rowspan="3">データ２</td>
<td>データ2-1</td>
</tr>
<tr>
<th style="background-color: lightgreen;">副見出しA2</th>
<td>データ1-2</td>
<td>データ2-2</td>
</tr>
<tr>
<th style="background-color: lightgreen;">副見出しA3</th>
<td>データ1-3</td>
<td>データ2-3</td>
</tr>
<tr>
<th rowspan="3" style="background-color: lightgreen;">見出しＢ</th>
<th style="background-color: lightgreen;">副見出しB1</th>
<td rowspan="3">データ３</td>
<td>データ3-1</td>
<td rowspan="3">データ４</td>
<td>データ4-1</td>
</tr>
<tr>
<th style="background-color: lightgreen;">副見出しB2</th>
<td>データ3-2</td>
<td>データ4-2</td>
</tr>
<tr>
<th style="background-color: lightgreen;">副見出しB3</th>
<td>データ3-3</td>
<td>データ4-3</td>
</tr>
</tbody>
</table>
rowspanやcolspanを上手く使いこなせると、複雑な表も作成できるようになります。
Bloggerブログでの使用方法
Bloggerブログでは記事をHTMLビューに変更して、そのまま貼り付ければ使用できます。
ただ公式テーマ以外のテーマを使用していると、<table>タグの指定が効かない場合があります。
QooQでの対処方法については後日、記事をあげる予定です。
➡ QooQでtableタグを使用可能にする方法（近日公開）
色々な表を作成してみよう！
CSSなしでも、意外と色々な表を作成することが可能です。
本記事を参考に、色々試してみてくださいね！
