表を作ってみよう
すっごーい、君は割烹を作るのが得意なフレンズなんだね。
……え？ ロゴ？ 怒られる？ たのしー？ え？ なんのことです？
(∩゜д゜)アーアーきこえなーい
あ、そういえばけものフレンズ２が放送されているみたいですね。私も見てみましたが○○○○がサムズアップしながら溶鉱炉に沈むシーンは号泣ものでしたね。（嘘だと思うなら『けものフレンズ２ 溶鉱炉』で検索！）
あ、けものフレンズと言えば、『ぼくのフレンド』って曲がいいんですよ。
ピアノバージョンとか最高ですよ。もう泣けます。
ぜひCD買って聞いてみてください。
はい、ということで、宣伝もばっちりでこれで一安心ですね。
……というか一人遊びなのにフレンズってなんだろう。……まぁいっか。
そんなわけで、とある割烹芸人のテンプレート、7回目です。
今回は表について説明しますよ。
あ、ちなみに今回で基本的なタグの説明は終わりです。
これまで説明してきたことで大概のテンプレートが作れるようになります。
なお、説明してこなかったタグは使えないか、推奨されていないか、割烹で使う理由がないかです。
検証したタグの一覧は最終話に載せる予定なので気になる人は見てみるといいかもです。
ということで表についてやりましょう。
表はtableというタグを使って実現します。
使うのは4つのタグです。
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>
それぞれどうなっているかというとこんな感じに対応してます。
また、表は結合することも可能です。
縦の結合
<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="つなげたい数"繋げます。
こんな感じですね。あとは以前説明したスタイル指定などを駆使し、彩ります。
まぁ活動報告で表をどれだけ使う人がいるかは不明ですが覚えておくといいかもですね。
ということでここからはテンプレートです。コピペしてどんな感じになるか見てみてください。
■3×3の表+中央ぞろえ+赤色
<table border="2" style="color:red;text-align: center;width:300px">
<tr>
<td>中身1-1</td><td>中身1-2</td><td>中身1-3</td>
</tr>
<tr>
<td>中身2-1</td><td>中身2-2</td><td>中身2-3</td>
</tr>
<tr>
<td>中身3-1</td><td>中身3-2</td><td>中身3-3</td>
</tr>
</table>
color:redで文字色、text-align: centerでそろえ位置を指定
■3×3の表+背景色変更
<table border="2" style="background-color:#f1f1f1;width:90%;">
<tr>
<td>中身1-1</td><td>中身1-2</td><td>中身1-3</td>
</tr>
<tr>
<td>中身2-1</td><td>中身2-2</td><td>中身2-3</td>
</tr>
<tr>
<td>中身3-1</td><td>中身3-2</td><td>中身3-3</td>
</tr>
</table>
background-colorで背景色の変更
■2×2の表+画像追加
<table border="2">
<tr>
<td>野崎先輩</td><td><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i356410/" alt="i356410" /></td>
</tr>
<tr>
<td>蒼井後輩</td><td><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i356401/" alt="i356401" /></td>
</tr>
</table>
tdの間にimgタグを入れる。
■縦の結合
<table border="1">
<tr>
<td>あめんぼ</td><td rowspan="2">かわいい</td>
</tr>
<tr>
<td>だんごむし</td>
</tr>
</table>
rowspan="縦につなげたい数"で繋げます。
■横の結合
<table border="1">
<tr>
<td colspan="2">俺つえー</td>
</tr>
<tr>
<td>チート</td><td>ハーレム</td>
</tr>
</table>
colspan="横につなげたい数"で繋げます。
■背景の追加+表余白追加
<table border="1" style="font-size:24px;border:solid 2px #000000;border-collapse:separate;border-spacing:5px;">
<tr>
<td bgcolor="#F8E0E0">春</td><td bgcolor="#E0F8F7">夏</td>
</tr>
<tr>
<td bgcolor="#F8ECE0">秋</td>
<td bgcolor="#F2F2F2">冬</td>
</tr>
</table>
<table border="1" style="font-size:24px;border:solid 5px #000000;">
<tr>
<td bgcolor="#F8E0E0">春</td><td bgcolor="#E0F8F7">夏</td>
</tr>
<tr>
<td bgcolor="#F8ECE0">秋</td><td bgcolor="#F2F2F2">冬</td>
</tr>
</table>
separate;border-spacing:5px で表の間隔を設定
bgcolorで個別に背景色の変更
応用すれば色々な表が作れますよ。
なおテンプレートは割烹サンプル5です。
