テーブルを表示するHTMLタグの使い方

トップページ » HTMLタグ入門講座 » テーブルを表示するHTMLタグの使い方

■Webサイトにテーブルを表示する時の注意点

◇終了タグ、ダブルクォーテーションを省略しない

XHTMLでは、要素は必ず開始タグと終了タグを備えていなければならす、終了タグの省略は許されません。また、XHTMLでは属性名記述や属性値を囲む""（ダブルクォーテーション）を省略してはいけません。 HTMLでは、テーブルデータ終了タグ「</td>」や、ダブルクォーテーション「""」を省略して記述してもWebサイトの表示は変わりませんが、省略しない方が無難です。

◇Webサイトのレイアウトはスタイルシートで設定

Webサイトの見た目の整形は、スタイルシートで設定することが推奨されています。テーブルタグを使用してレイアウトを整形することはSEO上、好ましくないとされています。

■Webサイトにテーブルを表示するHTMLタグ

テーブル（表）を表示するには、HTMLファイルにテーブルタグ「<table>」を記述します。「<tr>」でテーブルの行を設定し、テーブルデータ開始タグ「<td>」とテーブルデータ終了タグ「</td>」の間に表示するデータを記述します。

テーブルタグ「<table>」の主な属性と使用方法を以下の表にまとめました。掲載している属性は、「<tr>」や「<td>」でも指定可能です。表に掲載している以外にも属性は存在しますが、スタイルシートでの指定が推奨されている属性や、廃止された属性は省略しました。必須欄の◎は必須属性、○は推奨属性、×は非推奨属性です。

テーブルタグ属性	意味	必須
border=n	枠線の幅（太さ）を指定（0を指定すると枠線は非表示）
bordercolor=color	枠線の色を指定
height=n	テーブルの縦幅をピクセル、またはパーセンテージで指定
width=n	テーブルの横幅をピクセル、またはパーセンテージで指定
bgcolor=color	背景に表示する色を指定
background=url	背景として表示する画像ファイルのURLを指定（拡張子まで記述）
valign=valign	テーブルデータの縦の表示位置を指定 top：上揃え middle：中央揃え（既定値） bottom：下揃え
align=align	テーブルデータの横の表示位置を指定 left：左揃え（既定値） center：中央揃え right：右揃え
cellpadding=n	枠線とテーブルデータの間隔を指定
cellspacing=n	枠線の幅（太さ）を指定
rowspan=n	テーブルデータを n個分、縦方向に連結
colspan=n	テーブルデータを n個分、横方向に連結
class=class	クラスを指定
id=id	IDを指定
lang=lang	言語を指定
style=style	スタイルシートを指定
title=title	タイトルを指定

HTMLおよびXHTML記述例（テーブルデータの表示位置）

Webサイトの表示

test1	test2
test3	test4

HTMLおよびXHTML記述例（テーブルデータの結合）

Webサイトの表示

横結合1		横結合2
縦結合	test1	test2	test3
	test4	test5

できるホームページ HTML&CSS入門

発売：2010/12/24

定価：1,659円

著者：佐藤和人

出版：インプレスジャパン

内容：オールカラーの大きな画面で操作手順がよく見える初心者向けの書籍です。HTMLタグやスタイルシートの入力手順を丁寧に解説してます。手順の横にヒントも掲載されており、関連知識も身に付きます。ホームページやHTMLの用語集も付属してます。
Webサイト制作・運営に役立つ! ホームページ担当者が最初に覚える100の基本

発売：2010/06/05

定価：1,575円

著者：服部洋二

出版：ソーテック社

内容：初心者向けの書籍です。中小企業のWebサイトに携わる方向けの書籍ですので、個人のウェブサイトにも適用しやすい内容となっています。
Webデザインの基本ルール

発売：2009/03/27

定価：1,890円

著者：デザインラボ編集部

出版：ソフトバンククリエイティブ

内容：色の力を最大限に活かす配色の基本とベースカラー別配色パターン集、XHTMLとCSSでデザインをカタチにするWeb制作技術の概要と基本、Web標準、SEO、ユーザビリティ、アクセシビリティの考え方など。
HTML/XHTML&スタイルシートレッスンブック

発売：2007/06/20

定価：2,604円

著者：エビスコム

出版：ソシム

内容：初心者の方におすすめしたい参考書籍です。 HTMLやCSSに関しても基礎的なことを、丁寧にとても分かりやすく説明してます。 Webページを作成する過程が、段階的に解説されているため、無理なくHTMLとCSSを習得できます。
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト

発売：2005/07

定価：2,520円

著者：益子貴寛

出版：秀和システム

内容：「Web標準」とは、Web上で標準的に利用される技術の総称です。Webサイトをより多様な環境に対応させ、誰にでもアクセスできるようにするには、この概念が必要不可欠だといえるでしょう。
SEOを強化する技術

発売：2009/12/18

定価：1,890円

著者：安川洋

出版：インプレスジャパン

内容：TwitterのSEO効果など最新のトピックについても記載されています。エンジニアだけではなく、エンジニアの力を借りてより高度なSEO対策を行いたいWeb担当者にも最適の内容です。

ムームードメイン

「ムームードメイン」は「ロリポップ！レンタルサーバー」を運営するpaperboy&co.の低価格ドメイン取得サービスです。2004年のサービス開始以来、初心者でも簡単にドメイン設定ができる機能と、580円/年～の手軽な価格帯で、個人を中心に多くの人が利用してます。「ロリポップ！レンタルサーバー」との契約を考えている人には、特におすすめの独自ドメイン取得サービスです。
スタードメイン

ネットオウル株式会社のスタードメインなら、.comドメインが年額950円で取得できます。スタードメインを利用すると「ネットオウルポイント」が進呈されますので、ネットオウル株式会社のレンタルサーバー「ミニバード」「ファイアバード」「クローバー」との契約を考えている人には、特におすすめの独自ドメイン取得サービスです。

ファイアバード

50GBの大容量で、月額525円からのレンタルサーバーです。マルチドメイン、無料お試し期間、その他ユーザーツールなど便利な機能がたくさんあります。
さくらインターネット

月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
Xbit（エクスビット）

稼働率99.99%以上、容量10GB、月額1,260円からのレンタルサーバーです。サポート体制が充実しており、専任のサポートスタッフを置くことで、平均3時間のクイックレスポンスを実現してます。
１００ＧＢ無制限レンタルサーバー【Ｘ２】

100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
マルチドメイン対応、ビジネス仕様高性能レンタルサーバー【シックスコア】

サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。
ＷＡＤＡＸレンタルサーバー

サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。