テーブルデザイン

デザイン見本Style

顧客満足度★★★★★
価格祇園精舎の鐘の声、諸行無常の響きあり。
栄養バランス沙羅双樹の花の色、盛者必衰の理をあらはす。
安全性おごれる人も久しからず、ただ春の夜の夢のごとし。
発送の丁寧さたけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。

デザインの設定

  • 「table」アイテムに「style」のクラスを付けます。
  • 項目タイトルの部分(表の左側)は「th」、説明文の部分は「td」でセットします。
  • 「tbody」も必ず使用してください。
  • 星部分のtdには「star」のクラスを付けます。

コード見本

<table class="style"><tbody><tr><th>顧客満足度</th><td class="star">★★★★★</td></tr><tr><th>価格</th><td>祇園精舎の鐘の声、諸行無常の響きあり。</td></tr><tr><th>栄養バランス</th><td>沙羅双樹の花の色、盛者必衰の理をあらはす。</td></tr><tr><th>安全性</th><td>おごれる人も久しからず、ただ春の夜の夢のごとし。</td></tr><tr><th>発送の丁寧さ</th><td>たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</td></tr></tbody></table>

デザイン見本Style2

施設の種類入居一時金の相場月額料金の相場
介護付き有料老人ホーム0〜数千万円。15〜35万円。
住宅型有料老人ホーム0〜数億円。15〜35万円。
サービス付き高齢者向け住宅0〜数十万円。10〜35万円。
特別養老老人ホーム0円。6〜15万円。
グループホーム0〜数百万円。15〜30万円。
ケアハウス(軽費老人ホームC型)数十万〜数百万円。15〜35万円。

デザインの設定

  • 「table」アイテムに「style2」のクラスを付けます。
  • 項目タイトルの部分(表の一番上)は「th」、それ以外は「td」でセットします。
  • 「tbody」も必ず使用してください。
  • 「td」の一番左は、CSSのセットで色付き背景(文字左寄せ)となります。

コード見本

<table class="style2"><tbody><tr><th>施設の種類</th><th>入居一時金の相場</th><th>月額料金の相場</th></tr><tr><td>介護付き有料老人ホーム</td><td>0〜数千万円。</td><td>15〜35万円。</td></tr><tr><td>住宅型有料老人ホーム</td><td>0〜数億円。</td><td>15〜35万円。</td></tr><tr><td>サービス付き高齢者向け住宅</td><td>0〜数十万円。</td><td>10〜35万円。</td></tr><tr><td>特別養老老人ホーム</td><td>0円。</td><td>6〜15万円。</td></tr><tr><td>グループホーム</td><td>0〜数百万円。</td><td>15〜30万円。</td></tr><tr><td>ケアハウス(軽費老人ホームC型)</td><td>数十万〜数百万円。</td><td>15〜35万円。</td></tr></tbody></table>