１か月授業内容まとめ - テキスト（6）表

表

  • テキスト、P.048
  • table 要素
  • caption 要素
  • tr要素：table row（１行）
  • td 要素：table description
  • th要素：table header


<body>
<h1>Web年表</h1>
<table border="1">
<caption>1999年以前</caption>
<tr>
<th>西暦</th><th>出来事</th>
</tr>
<tr>
<td>1989年</td><td>WWWの誕生</td>
</tr>
<tr>
<td>1993年</td><td>Mosaic 登場</td>
</tr>
<tr>
<td>1995年</td><td>Windows 95</td>
</tr>
<tr>
<td>1998年</td><td>Google 登場</td>
</tr>
</table>
</body>

f:id:web-css-design:20160823091338p:plain


文字と枠の修飾は「CSS」でおこないます。
ただし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。

セルの結合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セルの結合</title>
</head>
<body>
<h1>colspanとrowspan</h1>
<table border="1">
<tr>
<td>１</td><td colspan="2">２</td>
</tr>
<tr>
<td>３</td><td rowspan="2">４</td><td>５</td>
</tr>
<tr>
<td>６</td><td>７</td>
</tr>
</table>
</body>
</html>

f:id:web-css-design:20160823095728p:plain


フォーム

  • テキスト、P.050
  • フォームの記述演習は、PHPの授業内で行います