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

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

表のタイトルを表示する

表にタイトルを表示してみよう

表のタイトルを表示するには、<caption>を使用します。

<caption>表のタイトル</caption>

<caption>と</caption>で囲んだテキストが表のタイトルとして設定され、表の上に中央揃えで表示されます。
入力する場所はどこでも良いのですが、わかりやすく<table>の下に入力するのが一般的です。

さっそく、<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">

<caption>時間割</caption>

 <tr>
  <th>時間</th>
  <th>教科</th>
  <th>担任</th>
 </tr>

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

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

 <tr>
  <td>三時間目</td>
  <td>社会</td>
  <td>野田</td>
 </tr>

</table>

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

表の上に「時間割」のテキストが中央揃えで表示されていれば成功です。

[ブラウザでの表示例]
タイトルを追加した表の表示例

このように、<caption>を使うことによって表のタイトルを表示することができます。

データの追加

では、せっかくなので、もう少し表にデータを書き加えてみましょう。
「担任」の横に、「場所」の項目を追加します。

step.1

まずは<th>担任</th>の下に<th>場所</th>を付け加えましょう。

<th>時間</th>
<th>教科</th>
<th>担任</th>
<th>場所</th>

step.2

次に、<td>西田</td>の下に<td>第1教室</td>を付け加えます。

<td>一時間目</td>
<td>国語</td>
<td>西田</td>
<td>第1教室</td>

step.3

同じように<td>入部</td>の下に<td>第1教室</td>も追加します。

<td>二時間目</td>
<td>数学</td>
<td>入部</td>
<td>第1教室</td>

step.4

さらに<td>野田</td>の下も同じように・・・

<td>三時間目</td>
<td>社会</td>
<td>野田</td>
<td>第2教室</td>

これでOKです。ソースコードをまとめると、以下のようになります。

[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">

<caption>時間割</caption>

 <tr>
  <th>時間</th>
  <th>教科</th>
  <th>担任</th>
  <th>場所</th>
 </tr>

 <tr>
  <td>一時間目</td>
  <td>国語</td>
  <td>西田</td>
  <td>第1教室</td>
 </tr>

 <tr>
  <td>二時間目</td>
  <td>数学</td>
  <td>入部</td>
  <td>第1教室</td>
 </tr>

 <tr>
  <td>三時間目</td>
  <td>社会</td>
  <td>野田</td>
  <td>第2教室</td>
 </tr>

</table>

入力が終わったらブラウザで確認してみましょう。
「場所」の項目が追加されていれば成功です。

[ブラウザでの表示例]
項目追加のサンプル画像

次のページではこの表を元に、セルの結合を学習してみましょう。

覚えておきたいポイント

タイトルで表をわかりやすく

表にタイトルが記載されていると、何について書かれている表なのかひと目でわかります。
複雑な表を作成する場合には、できるだけタイトルを付けると利用者に理解してもらいやすくなります。

セルの結合(縦)
« 前のページへ 見出し行の追加

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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