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

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

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

 ↑こんな表が、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かここのコメント欄にでも書き込んでください。

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメント

  • class=”hyou”
    を使うと縦と横に色が付きますが横だけや縦だけに色を付けたりすることは可能ですか?

    文字の大きさや、左揃えなどの変更のやりかたなどがあれば知りたいです。

    by Aさん 2014/07/27 22:50

  • TablePressというものを入れれば簡単にできそうですね。
    自己解決しそうです。

    by Aさん 2014/07/27 22:53

  • principleを使わせていただいています
    初心者向けに丁寧な説明、ありがとうございます。
    おかげさまできれいな表を作成できました。

    by Norikun 2014/11/05 16:38

  • 使っていただいてありがとうございます!

    >おかげさまできれいな表を作成できました。
    良かったです。やってみたら簡単でしょ?^^
    cssで配置や色など自由にいじってみてください!

    by Nobuo@管理人 2014/11/05 20:07

コメントを残す



*

Menu

HOME

TOP