HTMLによる基本的な表の作成方法

<table>タグの説明

表を作るには<table>タグを使います。

<table>と</table>の間に、行を作成する<tr></tr>を入力します。
さらにその中に<td></td>を入力し、セルを作ります。

基本的に、表に埋め込む文字や画像は<td>と</td>の間に入力します。

[表の基本構成]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>表の作成</title>

</head>

<table>

</table>

覚えておきたいポイント

入力ミスに気をつけよう

<table><tr><td>が正しく入力されていないと、行やセルのレイアウトが崩れたり、何も表示されなくなったりします。
それぞれの位置関係には気をつけましょう。

簡単な表の作成

表を作ってみよう

では実際に、簡単な表を作ってみましょう。2行2列の表を作ります。

step.1

まずは<body>と</body>の間に<table>を入力します。

<table>

</table>

step.2

次に、行を作成するために<tr></tr>を入力します。今回は2行なので、2つ分入力しましょう。

<table>

　<tr>

　</tr>

　<tr>

　</tr>

</table>

step.3

さらにその中に、セルを表す<td></td>を入力します。こちらも2列なので、2つ分入力します。

<table>

</table>

step.4

<td>の間にテキストを入力しましょう。

<table>

</table>

これで2行2列の表の完成です。

[HTMLの記述例]

<table>

</table>

ブラウザで確認

入力が完了したら、ブラウザで確認してみましょう！

[ブラウザでの表示例]

なんだか「表」というよりも、テキストが並んでいるだけに見えますね。これでは表っぽく見えません。
そこで、罫線や外枠を表示するようソースコードを書き換えてみましょう。

覚えておきたいポイント

必ず確認しよう

複数の行を作成する場合には、作成したい数だけ<tr>を入力するとOKです。
なお、その場合はすべての行で<td>の数が同じになるようにします。
各行内のセルの数が異なると、レイアウト崩れが発生したりと、表が正しく表示されない場合があります。

CSSファイルの記述

「style.css」ファイルに、罫線や外枠を表示するスタイルを記述しましょう。

追加するスタイルと説明

罫線や外枠を表示するには、CSSのborderプロパティを使います。

[CSSの記述例]

.tableborder {
border:solid 1px #666;
}

.tableborder td{
border:solid 1px #666;
}

これは、テーブル（表）の外枠と罫線に1pxの1本線を表示しなさい、というスタイルになります。
.tableborder tdは子セレクタで、tableborderの中のtdに、border:solid 1px #666;を適用します。

このスタイルを付け加えることにより、枠線が表示されるようになります。

step.1

では先ほどの<table>にスタイルを適用してみましょう。
<table>に作成したtableborderをclassで呼び出します。

</table>

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>表の作成</title>

</head>