ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

基本的な表の作成

<table>タグの説明

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

<table>表の内容</table>

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

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

[表の基本構成]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<table>

<tr>
<td></td>
</tr>

</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>

 <tr>
  <td></td>
  <td></td>
 </tr>

 <tr>
  <td></td>
  <td></td>
 </tr>

</table>

step.4

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

<table>

 <tr>
  <td>一時間目</td>
  <td>国語</td>
 </tr>

 <tr>
  <td>二時間目</td>
  <td>数学</td>
 </tr>

</table>

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

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<table>

 <tr>
  <td>一時間目</td>
  <td>国語</td>
 </tr>

 <tr>
  <td>二時間目</td>
  <td>数学</td>
 </tr>

</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 class="tableborder">

 <tr>
  <td>一時間目</td>
  <td>国語</td>
 </tr>

 <tr>
  <td>二時間目</td>
  <td>数学</td>
 </tr>

</table>

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<table class="tableborder">

 <tr>
  <td>一時間目</td>
  <td>国語</td>
 </tr>

 <tr>
  <td>二時間目</td>
  <td>数学</td>
 </tr>

</table>

step.2

入力が完了したら、もう一度ブラウザで確認してみてください。枠線(罫線と外枠)が表示されていると思います。

[ブラウザでの表示例]
スタイルを適用した表の図

うまく表示されたでしょうか?
これで基本的な表の作成は完了です。

次のページでは、行やセルを追加してみましょう!

覚えておきたいポイント

紐付けは必須

もしCSSが効かない場合は、HTMLファイルとCSSファイルがきちんと紐付けされているか確認しましょう。それでも効かない場合は、どこか記述が間違っている場合があります。classやid、呼び出すスタイルの名前などを確認してみましょう。

行やセルの追加
« 前のページへ 表の基礎知識

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。