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