<tbody>

<tr>

<th>

<td>

rowspan属性

colspan属性

<table class="price-table">
  <thead>
    <tr>
      <th class="price-th-plan"></th>
      <th class="price-th-plan">フリー</th>
      <th class="price-th-plan">スタンダード</th>
      <th class="price-th-plan">プレミアム</th>
    </tr>
  </thead>


  <tbody>
    <tr class="row01">
      <th>月額利用料</th>
      <td rowspan="2">¥0</td>
      <td>¥5,000</td>
      <td>¥10,000</td>
    </tr>    


    <tr class="row02">
      <th>初期費用</th>
      <td colspan="2">¥1,500</td>
    </tr>


    <tr class="row03">
      <th>サポート</th>
      <td>-</td>
      <td>◯</td>
      <td>◎</td>
    </tr>
  </tbody>
</table>

<table class="price-table">
  <thead>
    <tr>
      <th class="price-th-plan"></th>
      <th class="price-th-plan">フリー</th>
      <th class="price-th-plan">スタンダード</th>
      <th class="price-th-plan">プレミアム</th>
    </tr>
  </thead>


      





</table>

表データの作成

<table>

<thead>

表と見出しの作成

border-collapse

width

border

text-align

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

background-color

color

表のスタイリング

white-space

メディアクエリ

overflow-x: scroll

表の横スクロール

表形式の料金プランを作成し、ウェブサイトへの導入方法を学びます。
明確でわかりやすい情報表示のためのテーブルデザイン技術を修得します。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【パーツ編📦】ウェブサイトの主要なセクションパーツを作成

「料金プラン表を実装しよう」レッスンの総復習クイズです。