• 無料でHTMLが学習できる

ウェブサイト制作

表(テーブル)

目次

表(テーブル)を作る前に

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

 

このページのトップへ