表の練習

練習01_店舗営業時間

曜日 営業時間 定休日
月曜日 10:00〜19:00 なし
火曜日 10:00〜19:00 なし
水曜日 10:00〜17:00 なし
木曜日 10:00〜19:00 なし
金曜日 10:00〜19:00 なし

emmetを使ったやり方

Emmet 意味
> 子要素を作る
+ 同じ階層に追加
^ 1つ上の階層に戻る
[] 属性を付ける
{} テキストを入れる

練習02_料金プラン

プラン 利用時間 料金 備考
ライト 2時間 3,000円 初心者向け
スタンダード 4時間 5,000円 人気プラン
プレミアム 8時間 9,000円 長時間利用
※料金は税込価格です。

練習03_サービス比較表

項目 ベーシック スタンダード プレミアム
料金 3,000円 5,000円 8,000円
利用時間 2時間 4時間 8時間
サポート メール メール メール
ー 電話 電話・チャット
おすすめ 初めての方におすすめ しっかり利用したい方におすすめ

Emmetを使ったやり方

  1. tableとtheadを作成

    「table>thead>tr>th*4」を入力して、 後から文字を入力します。
    ※こちらの方法がおすすめです。

    まとめて文字を入力したい場合は、 「table[border="1"]>thead>tr>th{項目}+th{ベーシック}+th{スタンダード}+th{プレミアム}」 を入力します。

  2. tbodyの1行目を作成

    「tbody>tr>th+td+td+td」を入力します。

    まとめて文字を入力したい場合は、 「tbody>tr>th{料金}+td{3,000円}+td{5,000円}+td{8,000円}」 を入力します。

  3. tbodyの2行目を作成

    「^tr>th+td+td+td」を入力します。

    ^は、1つ上の階層に戻る記号です。
    tbody>tr>の状態から ^でtbodyに戻り、新しいtrを作成します。

    文字までまとめて入力する場合は、 「^tr>th{利用時間}+td{2時間}+td{4時間}+td{8時間}」 と入力します。

  4. rowspanを使ってセルを結合する

    「^tr>th[rowspan="2"]{サポート}+td{メール}+td{メール}+td{メール}」 を入力します。

    []は、HTMLの属性を指定するときに使います。

    rowspan="2"を指定すると、 セルを縦方向に2行分結合できます。

  5. tbodyの4行目を作成

    「^tr>td{ー}+td{電話}+td{電話・チャット}」 を入力します。

    「サポート」のセルは、前の行で rowspan="2"を指定しているため、 この行にはthを作成しません。

  6. colspanを使ってセルを結合する

    「^tr>th{おすすめ}+td[colspan="2"]{初めての方におすすめ}+td{しっかり利用したい方におすすめ}」 を入力します。

    colspan="2"を指定すると、 セルを横方向に2列分結合できます。