← クエスト一覧

クエスト7:テーブルを作ろう

スライド 1 / 2
コーデ
💻 コード例
実行結果
← クエスト一覧
🌐 HTML & CSS / Quest 7 / 50

クエスト7:テーブルを作ろう

基礎 +10 XP
🏠
今回の課題
名前なまえと点数てんすうの表ひょうを作つくろう!
📖 解説を見る
📊 テーブル(表ひょう)を作つくろう!

テーブルは「縦横たてよこに並ならんだ表ひょう」を作つくれます。

✏️ 書かき方かた:
<table>
  <tr>行ぎょう</tr>
  <th>見出みだし列れつ</th>
  <td>普通ふつうの列れつ</td>
</table>


⚠️ ポイント:
・tr = Table Row(行ぎょう)
・th = Table Header(見出みだし)
・td = Table Data(データでーた)
ヒントを見る
<table> の中に <tr><th>名前</th><th>点数</th></tr> を書いてみよう!
📄 見本
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
正解!見本と同じになりました。
次へ →
🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解 レッスンに戻る

全問正解でクエストクリア!

未挑戦

問題 1: 行ぎょうが偶数ぐうすうのとき背景色はいけいしょくを変かえる tr:nth-child(even) を追加ついかしよう!(自由じゆう回答かいとう)

🖼 プレビュー
実行結果
実行できたよ!
もう一度チャレンジ!
未挑戦

問題 2: 好すきな食たべ物ものと値段ねだんの表ひょうを作つくろう!(自由じゆう回答かいとう)

🖼 プレビュー
実行結果
実行できたよ!
もう一度チャレンジ!
未挑戦

問題 3: 列れつを3つにして「名前なまえ・教科きょうか・点数てんすう」の表ひょうを作つくろう!(自由じゆう回答かいとう)

🖼 プレビュー
実行結果
実行できたよ!
もう一度チャレンジ!
コピーしました!