1. メシオプレス02サンプルサイトTOP
  2. ショートコード一覧
  3. ≫テーブルサンプル

テーブルサンプル

ノーマルのテーブルのサンプルです。

  • thタグのセルは背景がブルー+中央揃えになります。
  • tdタグのセルはmidasiクラスを指定すると背景が薄いブルー+中央寄せになります。

これで行と列の見出しを別々に指定できます。

5列テーブル(ボタンあり)

比較物1 比較物2 比較物3 比較物4
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴
星評価 星3個 星2個 星5個 星4個
顔評価 丸3個 丸2個 丸5個 丸4個
詳細レビュー 詳細へ 詳細へ 詳細へ 詳細へ
公式HP 公式HP 公式HP 公式HP 公式HP

6列テーブル(ボタンあり)

比較物1 比較物2 比較物3 比較物4 比較物5
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個
詳細レビュー 詳細へ 詳細へ 詳細へ 詳細へ 詳細へ
公式HP 公式HP 公式HP 公式HP 公式HP 公式HP

6列テーブル(ボタンなし)

比較物1 比較物2 比較物3 比較物4 比較物5
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個

テーブルは記事枠の幅(620px)一杯に広がります。各セルの幅はHTMLに直接スタイルを指定しています。

「shousai url=”#”」→詳細へボタン
「kousiki url=”#”」→公式HPボタン(別ウインドウで開きます)
「marumaru」→二重丸
「maru」→丸
「sankaku」→三角
「batu」→バツ

スマホで見た場合の表示について

※列幅や機種にもよりますが、今回のサンプルのように6列以上の場合に詳細ボタン、公式HPボタンを使うと、スマホで「コンパクト表示」を選択した際に1列目の文字が縦に並んでしまいます(iPhone5の場合)。

これはボタンの幅で他のセルの幅が決まってしまうため、そのしわ寄せが1列目にきてしまうためです。この場合は画面も左右にフリック(スライド)すると動いてしまいます。

ですので、テーブル内でボタンを使う場合は5列までにするか、管理画面で「横スクロール」を選択して対応してください。(※当サンプルは「コンパクト表示」で表示させています)

テーブルカラーバリエーション

テーブルのカラーバリエーションはtableタグにクラス属性を指定することで適用します。何も指定しないとブルーになります。

  • ピンク:<table class=”tab_pink”>
  • グリーン:<table class=”tab_green”>
  • 黒:<table class=”tab_black”>
  • 白:<table class=”tab_white”>

ピンクバージョン

NJBナース人材バンク 看護roo! ナースではたらこ 看護のお仕事
公式サイト
登録料 無料 無料 無料 無料
エリア
全国
関東、関西、東海
全国
全国
お祝い金
10万円
5万円
特徴 1分で非公開求人情報をゲット 病院の内部情報を事前にたっぷり提供 専任コンサルタントによるサポート付き キャリアコンサルタントによるサポート付き
総合評価 星3個 星2個 丸5個 丸4個
詳細レビュー 詳細へ 詳細へ 詳細へ 詳細へ

グリーンだよ!

NJBナース人材バンク 看護roo! ナースではたらこ 看護のお仕事 マイナビ看護師
公式サイト
登録料 無料 無料 無料 無料 無料
エリア
全国
関東、関西、東海
全国
全国
全国
お祝い金
10万円
5万円
特徴 1分で非公開求人情報をゲット 病院の内部情報を事前にたっぷり提供 専任コンサルタントによるサポート付き キャリアコンサルタントによるサポート付き 就職・転職でお馴染み「マイナビ」が運営
総合評価 星3個 星2個 丸5個 丸4個 丸3個

ブラックバージョン

NJBナース人材バンク 看護roo! ナースではたらこ 看護のお仕事 マイナビ看護師
公式サイト
登録料 無料 無料 無料 無料 無料
エリア
全国
関東、関西、東海
全国
全国
全国
お祝い金
10万円
5万円
特徴 1分で非公開求人情報をゲット 病院の内部情報を事前にたっぷり提供 専任コンサルタントによるサポート付き キャリアコンサルタントによるサポート付き 就職・転職でお馴染み「マイナビ」が運営
総合評価 星3個 星2個 丸5個 丸4個 丸3個

ホワイトバージョン

NJBナース人材バンク 看護roo! ナースではたらこ 看護のお仕事 マイナビ看護師
公式サイト
登録料 無料 無料 無料 無料 無料
エリア
全国
関東、関西、東海
全国
全国
全国
お祝い金
10万円
5万円
特徴 1分で非公開求人情報をゲット 病院の内部情報を事前にたっぷり提供 専任コンサルタントによるサポート付き キャリアコンサルタントによるサポート付き 就職・転職でお馴染み「マイナビ」が運営
総合評価 星3個 星2個 丸5個 丸4個 丸3個

スマホでPC版閲覧時のみ文字を拡大したい場合(ズーム機能)

「このテーブルは項目数が多いからPC表示のままが良いけど、こっちのテーブルは項目数が少ないからテキストは拡大したい」という場合に活用します。zoom_table というクラスをtableに指定すると、そのテーブルのみスマホでPCサイトを表示したときに拡大表示されます。
記述方法:<table class=”zoom_table“>

スマホ閲覧時のみ拡大

比較物1 比較物2 比較物3 比較物4 比較物5
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個

PC表示のまま

比較物1 比較物2 比較物3 比較物4 比較物5
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個

1列目だけ見出しにする場合

1行目の見出し行が不要の場合はthタグを使わず、tdタグを使ってください。そうすると下記のようになります。

◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個

1列目だけ濃い見出しにする場合

1列目の見出し行に濃い色を指定したい場合は、1列目に当たる要素をtdからthに変えます。

◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個

枠線のないテーブルにする場合

<table>を<table class=”no-border-table”>に変更

比較物1 比較物2 比較物3 比較物4 比較物5
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個

横線のみのテーブルにする場合

<table>を<table class=”yoko-border-table”>に変更

比較物1 比較物2 比較物3 比較物4 比較物5
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個

縦線のみのテーブルにする場合

<table>を<table class=”tate-border-table”>に変更

比較物1 比較物2 比較物3 比較物4 比較物5
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個

特定のセルの背景を変えたテーブルにする場合

セルに対して直接スタイルを指定します。
例)<td style=”background-color: #db4f4f;”>¥3,500</td>

比較物1 比較物2 比較物3 比較物4 比較物5
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴 比較物5の特徴
星評価 星3個 星2個 星5個 星4個 星3個
顔評価 丸3個 丸2個 丸5個 丸4個 丸3個

テーブルの行揃え変更

<table>タグに下記のクラスを指定することで全て一括で変更することができます。

  • 左揃え:class=”hidari”
  • 右揃え:class=”migi”

■左揃えサンプル

比較物1 比較物2 比較物3 比較物4
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴
星評価 星3個 星2個 星5個 星4個
顔評価 丸3個 丸2個 丸5個 丸4個

■右揃えサンプル

比較物1 比較物2 比較物3 比較物4
◯×
特徴 比較物1の特徴 比較物2の特徴 比較物3の特徴 比較物4の特徴
星評価 星3個 星2個 星5個 星4個
顔評価 丸3個 丸2個 丸5個 丸4個

これらの設定方法の詳細は、同梱のサンプルショートコードのソースを見てください。

シェアをお願いします。

固定ページ下部ウィジェット

  • 固定ページ下部ウィジェット