border-collapse

border

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

  <tr class="table-row">
    <th class="table-heading">月額利用料</th>
    <td class="table-data" rowspan="2">&yen;0</td>
    <td class="table-data">&yen;5,000</td>
    <td class="table-data">&yen;10,000</td>
  </tr>

  <tr class="table-row">
    <th class="table-heading">初期費用</th>
    <td class="table-data" colspan="2">&yen;1,500</td>
  </tr>

  <tr class="table-row">
    <th class="table-heading">サポート</th>
    <td class="table-data">-</td>
    <td class="table-data">○</td>
    <td class="table-data">◎</td>
  </tr>
</table>


html {
  font-size: 62.5%;
}

body {
  font-family: 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 1.4rem;
}

.table {
  width: 500px;
  /* 問題1. 表に罫線を引こう */
  border-collapse: collapse;
}

th,
td {
  /* 問題1. 表に罫線を引こう */
  border: 1px solid #e8e8e8;
}

.table-heading {
  width: 25%;
  padding: 8px;
  text-align: center;
}

.plan {
  width: 25%;
  padding: 8px;
  text-align: center;
  background-color: #f6a300;
  color: #fff;
}

.table-data {
  width: 25%;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}


html {
  font-size: 62.5%;
}

body {
  font-family: 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 1.4rem;
}

.table {
  width: 500px;
  /* 問題1. 表に罫線を引こう */
}

th,
td {
  /* 問題1. 表に罫線を引こう */
}

.table-heading {
  width: 25%;
  padding: 8px;
  text-align: center;
}

.plan {
  width: 25%;
  padding: 8px;
  text-align: center;
  background-color: #f6a300;
  color: #fff;
}

.table-data {
  width: 25%;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}


表をスタイリングしよう

<table>

width

表を作成しよう

<tr>

<th>

padding

padding: 10px 20px 30px;

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

text-align

background-color

color

表の行と見出しを作成しよう

<td>

colspan属性

rowspan属性

vertical-align

表の内容を表そう

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

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

Web制作コース

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

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