定義型リスト・表組み

  • 定義型リスト
    • dl(definition list デフィニッション リスト)…定義リスト
    • dt(definition term デフィニッション ターム)…定義する用語
    • dd(definition description デフィニッション ディスクリプション)dtの説明、詳細。複数あってもよい。
  • 表組み
    • table(table)
    • tr(table row テーブル ロー…行(畑 コーンロー)
    • trのみはNG。必ずthかtd入れる事。列はカラム(コラム)
    • th(table head テーブル ヘッド)…見出しセル
    • 文字真ん中に表示される。
    • td(table description テーブル ディスクリプション)…セル
    • rowspan=""…行をまたがる
    • colspan=""…列をまたがる
    • summary(サマリー)…要約(目には見えないが読み上げソフトが読み上げる項目)

☆table border="1" width="300" summary="内容のイメージ"

  • 文字と枠の修飾は「CSS」で行う。
  • 枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。
  • 最終的には「CSS」設定後、削除します。

☆trを数えると何行かすばやく分かる。

  • content(内容物):300にborder:10を設定すると全体が320になってしまう。


授業課題





<html>
<head>
<title></title>
</head>
<body>
<dl>
<dt>リンゴ</dt>
<dd>赤くて丸いバラ科の果物</dd>
<dt>ミカン</dt>
<dd>黄色くて皮の薄いミカン科の果物</dd>
<dt>メロン</dt>
<dd>黄緑色で表面に溝があるウリ科の果物</dd>
</dl>
<table border="1" width="300">
<tr>
<th>今日の天気</th><td></td>
</tr>
<tr>
<th>明日の天気</th><td>晴れ</td>
</tr>
</table>
<table border="3" width="300">
<tr>
<td rowspan="2">1</td><td colspan="2">2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
<tr>
<td colspan="2">5</td><td rowspan="2">6</td>
</tr>
<tr>
<td>7</td><td>8</td>
</tr>
</table>
</body>
</html>