目次
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>タグ は 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>タグを使います。