<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>
  </tr>

  <tr class="table-row">
    <th class="table-heading">初期費用</th>
  </tr>

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

html {
  font-size: 62.5%;
}

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

.table {
  width: 500px;
}

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

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


<tr>

<th>

width

padding

padding: 10px 20px 30px;

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

text-align

background-color

color


    const questions = [
        {
            title: 'trタグを使って、表の行を作成しよう',
            tests: [
                {
                    title: '`<tr>`タグを実装し、`table-row`クラスを定義しましょう。また、4つ分作成してください。',
                    hint: '`*<tr class="table-row"></tr>*`を4つ分作成してください。',
                    test: () => isElExist('tr.table-row')
                }
            ]
        },
        {
            title: 'thタグを使って、表の見出しを作成しよう',
            tests: [
                {
                    title: '1行目の`<tr>`タグ内の最初に、`*<th class="plan"></th>*`を実装しましょう。',
                    hint: '1行目・1列目に空欄が配置されます。',
                    test: () => isContainTextInEditor('<th class="plan"></th>')
                },
                {
                    title: '1行目の`<tr>`タグ内の2つ目に、`*<th class="plan">フリー</th>*`を実装しましょう。',
                    hint: '1行目・2列目に「プラン」が配置されます。',
                    test: () => isContainTextInEditor('<th class="plan">フリー</th>')
                },
                {
                    title: '1行目の`<tr>`タグ内の3つ目に、`*<th class="plan">スタンダード</th>*`を実装しましょう。',
                    hint: '1行目・3列目に「スタンダード」が配置されます。',
                    test: () => isContainTextInEditor('<th class="plan">スタンダード</th>')
                },
                {
                    title: '1行目の`<tr>`タグ内の4つ目に、`*<th class="plan">プレミアム</th>*`を実装しましょう。',
                    hint: '1行目・4列目に「プレミアム」が配置されます。',
                    test: () => isContainTextInEditor('<th class="plan">プレミアム</th>')
                },
                {
                    title: '2行目の`<tr>`タグ内に、`*<th class="table-heading">月額利用料</th>*`を実装しましょう。',
                    hint: '2行目・1列目に「月額利用料」が配置されます。',
                    test: () => isContainTextInEditor('<th class="table-heading">月額利用料</th>')
                },
                {
                    title: '3行目の`<tr>`タグ内に、`*<th class="table-heading">初期費用</th>*`を実装しましょう。',
                    hint: '3行目・1列目に「初期費用」が配置されます。',
                    test: () => isContainTextInEditor('<th class="table-heading">初期費用</th>')
                },
                {
                    title: '4行目の`<tr>`タグ内に、`*<th class="table-heading">サポート</th>*`を実装しましょう。',
                    hint: '4行目・1列目に「サポート」が配置されます。',
                    test: () => isContainTextInEditor('<th class="table-heading">サポート</th>')
                }
            ]
        }
    ];


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

<table>

表を作成しよう

<td>

colspan属性

rowspan属性

vertical-align

表の内容を表そう

border-collapse

border

表をスタイリングしよう

料金プラン表を実装しましょう。

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

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

まずは必要なスキルを確認しましょう！