第5章:リストとテーブル(詳細+実習)

1. リスト(箇条書き)

<ul> は「・」、<ol> は「1. 2.」。入れ子に できます。用語集は <dl>(用語と説明)。

ul / ol / dl の 例

2. テーブル(表)の きほん

<table> は 行(<tr>)、見出し(<th>)、データ(<td>)。ヘッダーは <thead>、本体は <tbody> に 分けられます。

シンプルな 表

3. scope と アクセシビリティ

スクリーンリーダーが 読みやすい ように、見出しセルには scope を つけます(col / row)。

scope の ある 表

4. 列幅・テキスト整列・強調

CSS で 見やすく できます(幅・中央寄せ・強調)。

表の デザイン を ととのえる

章末ミニプロジェクト:時間割 テーブル

  1. <thead> に 曜日 を ならべる。
  2. 行見出し(<th scope="row">)で 1限・2限… を つける。
  3. 使いやすい 幅・配色 を CSS で 調整。