Principleなら、表(table)を作るのなんて超簡単

この記事は古いバージョンに関する情報なので、参考になりません。

tableが簡単・綺麗に出来上がり♪

　↑こんな表が、Principleでは超簡単に作れます。
　なんと<table>タグに「class=”hyou”」を付けるだけです。

順位表
順位
チーム名
勝ち点
1位
セレッソ
50
2位
ガンバ
40

　<table>タグに「class=”hyou”」を付けるだけで、表はセンタリング表示、見出し部分に背景色がついて、枠のなかの文字も全てセンタリングされて、適度な余白もつきます。
　しかも、スマホで見た場合は文字が小さくなります（狭い画面でもなるべく文字が折り返されないように）。

tableの作り方

　コーディングはしたことないという方には、なんとなくややこしいかも知れませんが、全然難しくないのでこの機に覚えてはどうですか？
　タグって読むのは大変ですが、書くのは簡単です。日本語の文章書く方がよほど難しいですから。

　tableの基本を簡単に説明します。

tableタグ

　まずは大枠であるtableタグ。

<table>

</table>

　この中に表を書きますよ。っていう意味。ulタグと同じような感じです。

trタグ

　まず、何行の表を作るのか？をtrタグで表します。
　trというのは、たぶんtable rowの略です。rowというのは一行みたいな意味です。
　trタグ（開始～終了）が一行を表します。
　3行の表を作りたいので、こうします。

<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

　このtrタグの中に、次で説明するthタグかtdタグのどちらかを入れることで枠を作っていきます。

thタグとtdタグ

　thというのは、たぶんtable headerの略です。thタグは「チーム名」とか「勝ち点」とかっていう見出し？として使う枠につけます。
　Principleでは、このthタグに背景色がつきます。

　tdというのは、たぶんtable dataの略です。tdタグは数値みたいな値を入れる枠につけます。
　tdタグには背景色はつきません。

　1行目は、「順位」「チーム名」「勝ち点」が入る枠です。これは3つともthタグが適当です。

<table>
<tr> <th></th> <th></th> <th></th> </tr>
<tr></tr>
<tr></tr>
</table>

※スペースは見やすいように入れているだけで、別に要りません。

　2行目は「1位」「セレッソ大阪」「50」を入れる枠です。「1位」はthタグが適当だと思います（どっちでもいいかも）。「セレッソ大阪」と「50」はtdタグが適当です。

<table>
<tr> <th></th> <th></th> <th></th> </tr>
<tr> <th></th> <td></td> <td></td> </tr>
<tr></tr>
</table>

　3行目もタグは同じですね。

<table>
<tr> <th></th> <th></th> <th></th> </tr>
<tr> <th></th> <td></td> <td></td> </tr>
<tr> <th></th> <td></td> <td></td> </tr>
</table>

中身を入れる

　枠が完成したら、中身を入れていきましょう。

<table>
<tr> <th>順位</th> <th>チーム名</th> <th>勝ち点</th> </tr>
<tr> <th>1位</th> <td>セレッソ大阪</td> <td>50</td> </tr>
<tr> <th>2位</th> <td>ガンバ大阪</td> <td>40</td> </tr>
</table>

はい、出来上がり。

captionタグ

　captionタグというのは、この表のタイトルみたいなものです。。
　これはタイトルが要らない場合は書かなくてもいいです。

<table>
<caption>順位表</caption>
<tr> <th>順位</th> <th>チーム名</th> <th>勝ち点</th> </tr>
<tr> <th>1位</th> <td>セレッソ大阪</td> <td>50</td> </tr>
<tr> <th>2位</th> <td>ガンバ大阪</td> <td>40</td> </tr>
</table>

　タイトルはデフォルトでは表の上に表示されます。
　下に表示させたくて、

<table>
<tr> <th>順位</th> <th>チーム名</th> <th>勝ち点</th> </tr>
<tr> <th>1位</th> <td>セレッソ大阪</td> <td>50</td> </tr>
<tr> <th>2位</th> <td>ガンバ大阪</td> <td>40</td> </tr>
<caption>順位表</caption>
</table>

こんなことしても、残念ながらタイトルは上に表示されます。

　もし下に表示させたい場合は、こんな風にcaptionタグにスタイルシートを当てればOK↓

<table>
<caption style="caption-side:bottom;">順位表</caption>
<tr> <th>順位</th> <th>チーム名</th> <th>勝ち点</th> </tr>
<tr> <th>1位</th> <td>セレッソ大阪</td> <td>50</td> </tr>
<tr> <th>2位</th> <td>ガンバ大阪</td> <td>40</td> </tr>
</table>

　これだけ覚えておけば、普通の表を組むぐらい、あっちゅう間に出来ますよ!

何か分からないことや問題があれば、Twitterかここのコメント欄にでも書き込んでください。