料金表
初段 / 目安 20分
「今度は料金の話！」と陽葵さんがメモを広げます。「モーニング・ランチ・ディナーの料金表がほしいの。あ、でもランチが一番人気だから、そこだけ目立たせて」。メモには時間帯と値段と、ひとことの説明が書いてあります。
素材は次のとおりです。モーニングは7:00-10:00 で ¥680、ランチは11:00-14:00 で ¥1080、ディナーは17:00-21:00 で ¥1580 です。
完成条件
tableで3列の料金表を作る- 1行目は
thの見出し行にし、モーニング・ランチ・ディナーを並べる - 見出し行に背景色を付けて、データの行と区別できるようにする
- ランチの列のセルに
class="pickup"を付け、背景色を変えて強調する
進め方
表は行が主役です。tr で1行を作り、その中に th か td を並べます。見出しの行は thead、データの行は tbody に入れておくと、あとから「見出しだけ」「データだけ」を狙って飾れます。
枠線を素直に引くと、セルとセルのあいだに隙間ができて二重線に見えます。border-collapse を collapse にすると、隣り合う線が1本にまとまります。列の強調は、その列に当たるセルへクラスを付けるのが一番わかりやすい方法です。ランチの列は見出し行とデータ行の両方にあるので、両方に付けます。
飾りすぎないでください。表の装飾は読みやすくするためのもので、目立たせるためのものではありません。
課題
tableの中にtheadとtbodyを置き、3列の料金表を作る- 見出し行は
thにし、モーニング・ランチ・ディナーを並べる - 見出し行に背景色を付ける
- ランチの列のセルに
class="pickup"を付け、背景色を変えて強調する
ヒント
前のヒントを開くと次が開きます。開かずに解けると未開封クリアです
ヒント 2ヒント 1 を開くと読めます
ヒント 3ヒント 2 を開くと読めます