HTML

HTML基礎講座　表を作りましょう｜普通の表

  /

時間割や料金表を作るときにHTMLで表を作る技術が必要になってきます。

今回は基本的な表の作り方を解説します。

表の作り方

まずは簡単な表を作ってみましょう。

今回は次の表を作ります

書き方はこうです。実際にVisual Studio Code（以下VScode）でファイルを開いて書いていきましょう。

<table border="1">
    <tr>
        <th>プラン名</th>
        <th>料金表</th>
    </tr>
    <tr>
        <td>ガッツリプラン</td>
        <td>ライトプラン</td>
    </tr>
    <tr>
        <td>6,980円</td>
        <td>4,980円</td>
    </tr>
</table>

ここでテーブルを作る際の部品の紹介をしておきましょう。

まずは、大枠のtableタグ。これは、テーブルの一番外枠を書いています。

次にtrタグ。こちらは、テーブルの行を指定しています。

次にthタグ。こちらは表の一番上の、列のタイトルを指定しています。

次にtdタグ。こちらは、テーブルの1セルを指定しています。

まとめると、外枠をtableタグで書いてあげて、その中にtrタグで必要な行数書いてあげて、

さらにthタグで列のタイトルを書いてあげて、tdタグで必要なセル数用意して内容を書くといった感じです。

図解で説明しますと、次の通りです。コードと見比べて理解してください。

<table border="1">
    <tr>
        <th>プラン名</th>
        <th>料金表</th>
    </tr>
    <tr>
        <td>ガッツリプラン</td>
        <td>ライトプラン</td>
    </tr>
    <tr>
        <td>6,980円</td>
        <td>4,980円</td>
    </tr>
</table>

ちなみに、

<table border="1">

の箇所はまだCSSを学んでいないので、HTMLで簡易的な罫線を出す記述です。

今後学習するCSSでデザインはいい感じに変更できます。

以上が、表を作りましょうpart1になります。

続いてpart2に行きます。

RELATED POST