演習課題「テーブルのタイトルを追加しよう」
現在、ブラウザには、ぱいじょの生徒である霧島京子と六村リオの数学のテスト結果がテーブルとして表示されています。
ここで、数学のテスト結果というテーブルのタイトルを追加してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃02:キャプション(caption)
このチャプターでは、キャプションについて学習します。
table要素には、これまで見てきたtr要素や、td要素、th要素以外にも、caption要素という子要素が存在します。
このcaption要素はtable要素内の1つ目の子要素として1つだけ記述できる要素です。これを使うと、テーブルのタイトルや説明を表すキャプションを上部につけることができます。caption要素を適切に使うことで、視覚的に分かりやすくなるだけではなく、スクリーンリーダーなどの補助技術を利用するユーザーにも、テーブルの目的を正確に伝えることができます。
<!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>
<caption>テストの成績</caption>
<tr>
<th>名前</th>
<th>太郎</th><th>次郎</th><th>三郎</th>
</tr>
<tr>
<th>国語</th>
<td>50</td><td>60</td><td>80</td>
</tr>
<tr>
<th>算数</th>
<td>70</td><td>70</td><td>70</td>
</tr>
</table>
</body>
</html>
MDN web docs - <caption>: 表キャプション要素
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/caption