演習課題「テーブルにボーダーを追加しよう」
現在、ブラウザでは、ぱいじょの生徒である霧島京子と六村リオの数学のテスト結果がテーブルとして表示されています。
ここで、table要素にborderプロパティを適用して、実線の、太さが2px、色が#9acd32のボーダーを表示させ、そのボーダーがキャプションを覆わないことを確認してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃03:テーブルのボックスモデル
このチャプターでは、テーブルのボックスモデルについて学習します。
テーブルは「インターナルボックス」と「ラッパーボックス」で構成されます。
・インターナルボックス: caption要素を除くすべてのテーブル要素（tr要素, th要素, td要素など）は、このインターナルボックス内に配置されます。ボーダーとパディングは、このインターナルボックスに適用されます。
・ラッパーボックス: すべてのテーブルのボックス（インターナルボックスを含む）は、このラッパーボックス内に配置されます。マージンは、このラッパーボックスに適用されます。
特定のテーブル要素では、ボックスモデルのプロパティが通常とは異なる振る舞いをします。
・th要素とtd要素: マージンが無効になります。
・tr要素: パディング、ボーダー、マージンがすべて無効になります。
@charset "UTF-8";
table {border: solid 2px lime;}
th{
padding: 10px 20px;
border: solid 2px blue;
}
td{
padding: 10px 20px;
border: solid 2px red;
}