テーブルを作ってみる。ただ、テーブルってあんまり使われていないような気もする。昔はレイアウト用に使っていたようだけど今は違うよ。
テーブル（表）を作成するタグについて説明します。
昔はレイアウトに関するタグがあまりなかったのでテーブルで代用していたこともあったようです。
レイアウトの主流はtable->float->flex->gridのように変化しています。なろうではfloatが使えるのと、単なるブログ部分だけの装飾なので特にtableを使ってレイアウトするということはあまりないです。
まずは基本を説明です。tableタグはそれ全体を表すもの、そして見出しや行を設定するもの、個別の要素を設定するものに分けられます。
tableタグ：表全体を設定
thタグ：表の見出し ※なくてもOK
trタグ：表の行
tdタグ：表の要素
文章で言っても分かりにくいので、実例を見ましょう。
<table border="1">
<tr>
<th>くだもの</th><th>色</th>
</tr>
<tr>
<td>りんご</td><td>だいたいあかい</td>
</tr>
<tr>
<td>みかん</td><td>だいたいだいだい</td>
</tr>
</table>
このようにtrで一つの行、を設定、その中にth、tdを設定します。
それぞれどうなっているかというとこんな感じに対応してます。
また、表は結合することも可能です。
縦の結合
<table border="1">
<tr>
<th>くだもの</th><th>あじ</th>
</tr>
<tr>
<td>りんご</td><td rowspan="2">だいたいおいしい</td>
</tr>
<tr>
<td>みかん</td>
</tr>
</table>
rowspan="つなげたい数"で繋げます。
横の結合
<table border="1">
<tr>
<th>くだもの</th><th>おいしい</th>
</tr>
<tr>
<td colspan="2">くだものおいしい</td>
</tr>
<tr>
<td>やさいも</td><td>すき</td>
</tr>
</table>
colspan="つなげたい数"繋げます。
なお、border="1"で枠線を付けています。中の数値は線の太さ(px)です。
実は、このプロパティは非推奨です。
本来はcssでtd, thにborder:1px solid;などを設定するのですが、cssを使えないなろうでは、、border="1"を使わない場合、このようにしないといけません。
<table>
<tr>
<th style="border:solid">くだもの</th><th style="border:solid">色</th>
</tr>
<tr>
<td style="border:solid">りんご</td><td style="border:solid">だいたいあかい</td>
</tr>
<tr>
<td style="border:solid">みかん</td><td style="border:solid">だいたいだいだい</td>
</tr>
</table>
うーん、って感じですね。
あんまり凝ったものを作ろうとすると文字数が増えるのでそこまで使えないと思います。改良も大変だ……
普通はcssに
table,
td {
border: 1px solid #333;
}
のようにかけばいいのであんまり悩むことはないんですが……
ちなみになろうCSSにテーブルCSSはほぼないのでそちらを利用することも難しいのです……
- - - 切り取り - - -
あとは簡単にこれまでの装飾との組み合わせ方を説明しておきます。
幅を変えたり、背景色を変える
<table style="width:100%;background:#f2f2f2">
<tr>
<th style="border:1px solid">くだもの</th><th style="border:1px solid">色</th>
</tr>
<tr>
<td style="border:1px solid">りんご</td><td style="border:1px solid">だいたいあかい</td>
</tr>
<tr>
<td style="border:1px solid">みかん</td><td style="border:1px solid">だいたいだいだい</td>
</tr>
</table>
全体に指定する場合はこんな感じにtableにスタイルを適用します。行単位、セル単位では個別の要素にスタイルを適用します。
もちろん、背景画像も使えます。
枠の比率を変える場合はこんな感じに、thに割合％を指定します。例えば7:3にする場合、
<table style="width:100%;background:#f2f2f2">
<tr>
<th style="border:1px solid;width:70%;">くだもの</th><th style="border:1px solid;width:30%;">色</th>
</tr>
<tr>
<td style="border:1px solid">りんご</td><td style="border:1px solid">だいたいあかい</td>
</tr>
<tr>
<td style="border:1px solid">みかん</td><td style="border:1px solid">だいたいだいだい</td>
</tr>
</table>
thだけ指定すればあとは従ってくれます。
文字を中央寄せにする場合はtableにtext-alignを指定します。
<table style="width:100%;background:#f2f2f2;text-align:center;">
<tr>
<th style="border:1px solid;">くだもの</th><th style="border:1px solid;">色</th>
</tr>
<tr>
<td style="border:1px solid">りんご</td><td style="border:1px solid">だいたいあかい</td>
</tr>
<tr>
<td style="border:1px solid">みかん</td><td style="border:1px solid">だいたいだいだい</td>
</tr>
</table>
色を変えたり、文字サイズを変えたり、線の種類を変えたりと、色々と応用は効くので、興味がある人は試してみるといいですね。
とはいえ、結構面倒なのですけど。
基本的にborderで代用できますし、あとで説明するfloatを使う方が柔軟に対応できます。
簡単な表でいいならばtableで組んでもいいと思いますが、構造を作るのが面倒なのですよね。
外部サービスにはtableタグを視覚的に作れるものもあるので表を作るときはそちらを利用するのが良いかと思います。
