表の罫線を指定する場合、border: 罫線の種類 太さ 色 とまとめて
記述することができ、ここではそれを使っています。以前の参考ページ
例えば、 border:solid 2px yellow; のように書きます。
これは、border-style: border-width: border-color:の個別指定を一つにまとめた表現です。
また、tableのtdの要素は、複数の要素を 一つにまとめることができます。
Nの列(column)の要素をまとめる時は、<td colspan="N">と指定して、右の対応する要素を減らします。
Nの行(row)の要素をまとめる時は、<td rowspan="N">と指定して、下の対応する要素を減らします。
以下でこの練習を行います。
まず目標の確認ボタンをクリックして左上に目標となるページを出します。
そして下の編集後の確認ボタンをクリックして左下に現状のページを出します。
(出題しているこのページは、右に配置して、3つのウインドウが同時に見えるようにするとよいでしょう。)
そして、違いを確認しましょう。それから下記テキストを編集して編集後の確認ボタンで現状のページがどう変わったか確認します。いろいろと実験して最終的に、目標となるページと現状のページが同じになるように編集と確認を繰り返します。
←このボタンをクリックして表示するWebページと、同じように見えるよう■■■■を変更ください。
(htmlタグなど、小文字を使っても影響がない範囲で小文字を使ってください。
正解しない場合は、何回か答えを見てパターンを学習し、それに合わせてください。)
<body>の中で使っているタグは、 table tr td または th です。タグは全て小文字にしてください。
スタイルは、<style type="text/css">と</style>の中で、
table tr th, td のセレクタを、この順番で指定します。(全て使うとは限りません)
thとtdを使う場合は、スタイルをコンマでth, td の両者一遍に指定します。
また、trのスタイルで20pxの高さ指定をしています。
枠の太さは、2px か 5px のいずれかを指定し、その色は、
red、
green、
blue、
gray、
のいずれかを指定します。 また、
表全体の幅は、tableのタグ属性で220にします。
←上記で編集した内容を、ブラウザで確認するボタンです
上のボタンで確認した後、正しいと思ったら、下の評価ボタンをクリックください。
←目標と同じ結果が得られるように修正してからクリックください。
(分からない場合もクリックください)
←わからない場合は、クリックして覚え、再びチャレンジしましょう。