ウェブサイト制作
表（テーブル）
目次
- 表(テーブル)を作る前に
- 表(テーブル)を作りたい
- 行や列に見出しを付けたい
- キャプションを付けたい
- 行をグループ化したい
- 列をグループ化したい
- 列に属性を指定したい
- 縦方向にセルを連結したい
- 横方向にセルを連結したい
表（テーブル）を作る前に
CSSをあらかじめ、用意しときます。
何故かというと、デフォルトの表（テーブル）では、線（ライン）が入っていないからです。
文字の羅列だけでは、見づらいですよね。
表（テーブル）には、行や列の線が入っていた方が見易いです。
↓↓これを見てください。これはCSSが効いてない表（テーブル）です。↓↓
表（テーブル）を作成する際は下記のCSSを付けてください。
（デフォルト設定のままが、良いという場合もありますが…）
表（テーブル）に線を付けるには
CSS
@charset"utf-8";
table {
border-collapse: collapse;
}
td {
border: solid 1px #000000;
padding: 0.5em;
}
CSS（カスケイディング・スタイル・シート）の解説
table要素
border-collapse属性：値がcollapse（collapse）
td要素
border属性：値がsolid（種類は実線） 1px（線太は1px） #000000（線色は黒）
padding属性：フォントの50%
表(テーブル)を作りたい
<td>タグを使います。<td>タグを使って
<td>タグ は Table Data の略です。
1マスのデータを定義します。
<tr>タグはTable Rowの略です。
1行を定義します。
店が3件あります。
表（テーブル）にするとこうなります。
セブンイレブン
熊谷市本町1丁目 048－520－XXXX 7:00～23:00
日高屋
熊谷市新堀3丁目 048－530－XXXX 7:00～23:00
ベルク
熊谷市元荒川5丁目 048－540－XXXX 10:00～24:00
区切り線が入れるCSSを使ってwebに表示させる
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="../css/table.css">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>表(テーブル)</h1>
<hr>
<h2>表(テーブル)を作りたい</h2>
<table>
<tr>
<td>セブンイレブン</td>
<td>熊谷市本町1丁目</td>
<td>048－520－XXXX</td><td>7:00～23:00</td>
</tr>
<tr>
<td>日高屋</td>
<td>熊谷市新堀3丁目</td>
<td>048－530－XXXX</td><td>7:00～23:00</td>
</tr>
<tr>
<td>ベルク</td>
<td>熊谷市元荒川5丁目</td>
<td>048－540－XXXX</td><td>10:00～24:00</td>
</tr>
</table>
</body>
</html>
（＊link先のCSS（css/table.css）のパスに注意する）
行や列に見出しを付けたい
<th>タグを使います。
<th>はTable Headerの略で、テーブルの見出しとなります。
<td>はTable Dataの略で、テーブルのセルを表します。
さっき作った表（テーブル）に、
CSSには<td>要素のスタイルは記述されていますが、
<th>要素のスタイルは記述されていません。
CSS
@charset"utf-8";
table {
border-collapse: collapse;
}
td th {
border: solid 1px #000000;
padding: 0.5em;
}
thを差し込むとスタイルに適用されます。
キャプションを付けたい
<caption>タグを使います。
表のタイトルを指定できます。
行をグループ化したい
<rowgroup>タグを使います
列をグループ化したい
<colgroup>タグを使います。
列に属性を指定したい
<col>タグを使います。
縦方向にセルを連結したい
<rowspan>タグを使います。
横方向にセルを連結したい
<colspan>タグを使います。
