読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

表組み

表組み

  • テキストP.48〜49
  • table 要素
  • caption 要素
  • tr要素:table row(1行)
  • 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

広告を非表示にする