演習課題「テーブルで表そう」
ぱいじょの生徒である霧島京子と六村リオの数学のテストの結果は、それぞれ85点と75点でした。これをテーブルで表示したいと思います。
現在、ブラウザには生徒と点数という見出し行が表示されています。
これに以下のセルを追加して、テーブルを完成させてください。
・生徒と書かれた行に、テーブルの見出しとなるセルとして霧島京子と六村リオという列を追加してください。
・点数と書かれた行に、テーブルの通常の列として85と75という列を追加してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃01:テーブル(table/tr/th/td)
このチャプターでは、テーブルについて学習します。
table要素は、データを表形式で表示するテーブルレイアウトを構成します。特別な指定がない限り、テーブル内のセルの幅と高さは、その中に含まれるコンテンツのサイズに合わせて自動的に調整されます。table要素の主な子要素として、以下の3つがあります。
・tr要素 (正式名称: table row): テーブルの行を構成する要素です。tableタグの中にtrタグを記述した数だけ、テーブルの行が作られます。
・td要素 (正式名称: table data): テーブルの通常のセル（列）を構成する要素です。後述するth要素と組み合わせて、trタグの中に記述されたtdタグの数（またはthタグの数）が、テーブルの列数を決定します。
・th要素 (正式名称: table header): テーブルの見出しとなるセルを構成する要素です。必ずしもテーブル内に含める必要はありませんが、td要素と同様にtrタグの中に記述されたthタグの数（またはtdタグの数）が、テーブルの列数を決定します。
これらの要素を組み合わせることで、整理されたデータ表示が可能です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブル</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style01.css">
</head>
<body>
<table>
<tr>
<th>名前</th>
<th>太郎</th><th>次郎</th>
</tr>
<tr>
<th>点数</th>
<td>70</td><td>85</td>
</tr>
</table>
</body>
</html>
MDN web docs - HTML の表の基本
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics
MDN web docs - <table>: 表要素
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/table
MDN web docs - <tr>: 表の行要素
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/tr
MDN web docs - <td>: 表データセル要素
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/td
MDN web docs - <th>: 表見出し要素
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/th