表(テーブル)を作成してみよう

表(テーブル)を作成してみよう

作成ファイル・保存場所

  • 作成したhtml-basic の中に html06.html というファイル名で保存してください。

目的

表形式のデータを表示する <table> タグの基本構造を理解し、<tr>(行)、<th>(見出しセル)、<td>(データセル)を適切に使って表を作成できるようになる。

指示

以下の条件に従って、HTMLで表を作成してください。

  • HTMLの基本構造は前回と同様に記述すること
  • タイトルは「HTML課題06」とすること
  • <h1> タグで「1週間の予定表」と表示すること
  • <table> タグを使って、以下のような構成の表を作成すること

表示する表の内容(構成)

日付予定
月曜日HTMLの復習
火曜日CSSの基礎
水曜日レイアウト練習
木曜日画像とリンク
金曜日ミニ作品づくり

チェックポイント

  • <table> タグを使い、行・列の構成が正しくできているか
  • 見出しセル(<th>)を使ってタイトルが明示されているか
  • 表が読みやすい構造になっているか
  • 不要なタグや閉じタグのミスがないか

要素名がわからない場合は、HTML要素一覧を参照してみましょう

HTMLの解答例

trの終了タグを忘れないようにしましょう

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTML課題06</title>
</head>

<body>
    <h1>1週間の予定表</h1>

    <table>
        <tr>
            <th>日付</th>
            <th>予定</th>
        </tr>
        <tr>
            <td>月曜日</td>
            <td>HTMLの復習</td>
        </tr>
        <tr>
            <td>火曜日</td>
            <td>CSSの基礎</td>
        </tr>
        <tr>
            <td>水曜日</td>
            <td>レイアウト練習</td>
        </tr>
        <tr>
            <td>木曜日</td>
            <td>画像とリンク</td>
        </tr>
        <tr>
            <td>金曜日</td>
            <td>ミニ作品づくり</td>
        </tr>
    </table>
</body>

</html>

プレビュー

プレビューするには、画面上で右クリックし、Open with Live Serverを起動。(プラグインのLive Serverが必要です)

吹き出し
WebTraining AI
WebTraining AI へようこそ!
HTML / CSS / JavaScript / Wordpress/ PHP など、 コードやプログラミングについて何でも質問できます。