トップページ  > ウェブ制作チュートリアル  > テーブル(表)の作成
第17章 テーブル(表)を作成する

★テーブル(表)の作成

テーブル(表)の作成

広告

テーブルとは表のことです。 テーブル(表)を作成するには、HTMLのtable要素を使用します。

profile.htmlに以下の記述を追加してください。

HTMLソース(profile.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>会社概要|ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header">
	<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>

	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</a></li>
	</ul>

	<!-- ヘッダ画像 -->
	<div id="img_subpage">
	<img src="./images/img_profile.png" alt="会社概要">
	</div>

	<!-- サブメニュー(左カラム) -->
	<div id="submenu">
		<h2>会社概要</h2>
		<ul>
			<li><a href="#info0001">企業情報</a></li>
			<li><a href="#info0002">沿革</a></li>
			<li><a href="#info0003">アクセス</a></li>
		</ul>
	</div>

	<!-- インフォメーション(右カラム) -->
	<div id="info">
		<h3 id="info0001">企業情報</h3>
		<table>
		<tr>
		<th>社名</th>
		<td>
		ウェブサンプル株式会社
		</td>
		</tr>
		<tr>
		<th>住所</th>
		<td>
		〒000-0000<br>
		東京都○○区○○○○○○<br>
		○○○○ビル<br>
		Tel:00-0000-0000(代表) Fax:00-0000-0000
		</td>
		</tr>
		<tr>
		<th>代表者</th>
		<td>
		○○○ ○○
		</td>
		</tr>
		<tr>
		<th>資本金</th>
		<td>
		00,000,000円
		</td>
		</tr>
		<tr>
		<th>事業内容</th>
		<td>
		○○事業<br>
		○○事業<br>
		○○事業<br>
		○○事業
		</td>
		</tr>
		</table>
		<hr>
		
		<h3 id="info0002">沿革</h3>
		<table>
		<tr><th>0000年00月</th><td>会社設立</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		</table>
		<hr>
	
		<h3 id="info0003">アクセス</h3>
		<hr>
	</div>

	<!-- フッタ -->
	<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>

</div>
</body>
</html>

保存をしたらブラウザで表示してみましょう。 先ほど入力したHTMLソースのテキスト部分の内容が表示されれば成功です。

まだ、ボーダーや背景色が付けられておらずテキストが表示されるだけなので、本当にテーブル(表)になっているかどうか分かりにくいかもしれません。 確認のために、二か所ある <table> の部分を <table border="1"> としてみてください。

border属性でテーブルにボーダーを付けたことで、表形式になっていることが見た目にも分かりやすくなりました。

テーブルの構造

HTMLで作成するテーブルの構造を理解しましょう。

まず、テーブル全体はtable要素で定義します。 <table>~</table>でひとつのテーブルです。 その内側に <tr>~</tr> を配置してテーブル内の横一行を定義します。 さらにその内側に <th>~</th> や <td>~</td> を配置して、見出しセルやデータセルを定義します。

例えば、 <tr><th>社名</th><td>ウェブサンプル株式会社</td></tr> は、テーブルの横一行となります。 <th>社名</th> は見出しセル、<td>ウェブサンプル株式会社</td> はデータセルです。 この横一行では、「社名」という見出しに「ウェブサンプル株式会社」というデータが対応しています。 また次の横一行では、「住所」という見出しに「東京都…」というデータが対応しています。

border属性の指定は、あとでCSSに置き換える

<table border="1"> のborder属性の指定は、あくまでも確認用の一時的なものです。 あとで border="1" の部分を削除して、CSSによる指定に置き換えます。

border属性は、要素にボーダーを付けるための属性ですが、最新のウェブ標準であるHTML5ではすでに廃止されています。 一般的なブラウザではまだサポートされているようですが、 これからウェブ制作をしていく際にはborder属性は使用しないほうが良いでしょう。

まとめ
  1. <table> ~ </table>でひとつのテーブル
  2. <tr> ~ </tr> で横一行、<td> ~ </td> でセルを定義する
  3. border属性は、HTML5ではすでに廃止されている
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ