2019/02/18機能解説Principleなら、表(table)を作るのなんて超簡単B!この記事は古いバージョンに関する情報なので、参考になりません。40↑こんな表が、Principleでは超簡単に作れます。なんと<table>タグに「class=”hyou”」を付けるだけです。40<table>タグに「class=”hyou”」を付けるだけで、表はセンタリング表示、見出し部分に背景色がついて、枠のなかの文字も全てセンタリングされて、適度な余白もつきます。スマホで見た場合は文字が小さくなります(狭い画面でもなるべく文字が折り返されないように)。スポンサーリンクtableの作り方コーディングはしたことないという方には、なんとなくややこしいかも知れませんが、全然難しくないのでこの機に覚えてはどうですか?タグって読むのは大変ですが、書くのは簡単です。日本語の文章書く方がよほど難しいですから。tableの基本を簡単に説明します。tableタグまずは大枠であるtableタグ。<table></table>この中に表を書きますよ。ulタグと同じような感じです。trタグまず、何行の表を作るのか?をtrタグで表します。rowというのは一行みたいな意味です。trタグ(開始~終了)が一行を表します。3行の表を作りたいので、こうします。<table><tr></tr><tr></tr><tr></tr></table>このtrタグの中に、次で説明するthタグかtdタグのどちらかを入れることで枠を作っていきます。headerの略です。thタグは「チーム名」とか「勝ち点」とかっていう見出し?として使う枠につけます。Principleでは、このthタグに背景色がつきます。tdタグは数値みたいな値を入れる枠につけます。tdタグには背景色はつきません。1行目は、「順位」「チーム名」「勝ち点」が入る枠です。これは3つともthタグが適当です。</tr><tr></tr><tr></tr></table>※スペースは見やすいように入れているだけで、別に要りません。2行目は「1位」「セレッソ大阪」「50」を入れる枠です。「1位」はthタグが適当だと思います(どっちでもいいかも)。「セレッソ大阪」と「50」はtdタグが適当です。</tr><tr></tr></table>3行目もタグは同じですね。</tr></table>中身を入れる枠が完成したら、中身を入れていきましょう。</tr></table>はい、出来上がり。captionタグcaptionタグというのは、この表のタイトルみたいなものです。これはタイトルが要らない場合は書かなくてもいいです。</tr></table>タイトルはデフォルトでは表の上に表示されます。</tr><caption>順位表</caption></table>こんなことしても、残念ながらタイトルは上に表示されます。</tr></table>これだけ覚えておけば、普通の表を組むぐらい、あっちゅう間に出来ますよ!何か分からないことや問題があれば、Twitterかここのコメント欄にでも書き込んでください。第1位エックスサーバースペック、安定感、使いやすさ、サポート、非の打ち所のない安心・安全レンタルサーバー。初心者はまずエックスサーバーがおすすめ。MixHostスポンサーリンクB!class=”hyou”を使うと縦と横に色が付きますが横だけや縦だけに色を付けたりすることは可能ですか?文字の大きさや、左揃えなどの変更のやりかたなどがあれば知りたいです。22:50TablePressというものを入れれば簡単にできそうですね。22:53principleを使わせていただいています初心者向けに丁寧な説明、ありがとうございます。おかげさまできれいな表を作成できました。16:38使っていただいてありがとうございます!>おかげさまできれいな表を作成できました。20:07コメントを残すコメントをキャンセルコメントNameEmailWebsite次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Railsでwebサービスを作ったりしています。PrinciplePrincipleは2013年に生まれたWordPressテーマです。2019年2月に完全フルモデルチェンジで新しく生まれ変わりました。無料ですのでどうぞ一度お試し下さい。