HPB18　｜　HPB19 コンテンツ一覧
ホーム　＞　HPB19　＞　HTML タグ辞典　＞　<table>タグ
目次　｜　元のページ 前のページ　｜　次のページ サイトマップ　｜　ページEND

HTML タグ辞典　<table>タグ

<table>タグ　リファレンス



<table>タグ　説明



<table>タグ（テーブルタグ）は、それぞれのセルを定義する <tr>タグ、<th>タグ、<td>タグと組み合わせて、表を記述する為のタグですが、ページのレイアウトに使用する事もでき、思い通りのページレイアウトをつくれる、とても便利なタグです

<caption>タグ、<th>タグを用いて、表、列、行のタイトルを定義することもできます



<table>タグ　記述例



記述例 <table bgcolor="#999999" border="0" cellspacing="1">
　<caption style="padding : 5px 20px;">表１</caption>
　<tbody>
　　<tr>
　　　<th bgcolor="#ffffff" style="padding : 5px 20px;"></th>
　　　<th bgcolor="#ffffff" style="padding : 5px 20px;">列１</th>
　　　<th bgcolor="#ffffff" style="padding : 5px 20px;">列２</th>
　　</tr>
　　<tr>
　　　<th bgcolor="#ffffff" style="padding : 5px 20px;">行１</th>
　　　<td bgcolor="#ffffff" style="padding : 5px 20px;">右上</td>
　　　<td bgcolor="#ffffff" style="padding : 5px 20px;">右上</td>
　　　</tr>
　　<tr>
　　　<th bgcolor="#ffffff" style="padding : 5px 20px;">行２</th>
　　　<td bgcolor="#ffffff" style="padding : 5px 20px;">右下</td>
　　　<td bgcolor="#ffffff" style="padding : 5px 20px;">右下</td>
　　</tr>
　</tbody>
</table>
表示例
表１
列１ 列２
行１ 右上 右上
行２ 右下 右下


<caption>タグ、および、<th>タグは、タイトル定義ですので、必ずしも必要な定義ではなく、必要に応じて、任意で使用します
「 bgcolor="#999999" 」、「 bgcolor="#ffffff" 」 は、表に罫線を引くための指定です
「 style="padding : 10px 20px;" 」 は、表の中をインデントするための 「 padding 」 指定で、最初の値 「 5px 」 は上下の、次の値 「 20p 」 が、左右のインデント指定値になっています
<caption>タグには、「 style 」指定はできますが、「 bgcolor 」指定はできません



<table>タグ　記述例　表を横に並べる



記述例 <table bgcolor="#999999" border="0" cellspacing="1" style="float:left; margin-right:20px;">
  <tbody>
    <tr>
      <td bgcolor="#ffffff" style="padding : 5px 20px;">左上</td>
      <td bgcolor="#ffffff" style="padding : 5px 20px;">右上</td>
    </tr>
    <tr>
      <td bgcolor="#ffffff" style="padding : 5px 20px;">左下</td>
      <td bgcolor="#ffffff" style="padding : 5px 20px;">右下</td>
    </tr>
  </tbody>
</table>
<table bgcolor="#999999" border="0" cellspacing="1">
  <tbody>
    <tr>
      <td bgcolor="#ffffff" style="padding : 5px 20px;">左上</td>
      <td bgcolor="#ffffff" style="padding : 5px 20px;">右上</td>
    </tr>
    <tr>
      <td bgcolor="#ffffff" style="padding : 5px 20px;">左下</td>
      <td bgcolor="#ffffff" style="padding : 5px 20px;">右下</td>
    </tr>
  </tbody>
</table>
表示例
左上 右上
左下 右下
左上 右上
左下 右下


「 style="float:left; 」 最初の表を左側に配置するための指定です
「 margin-right:20px; 」 最初の表の右側に 20ピクセル分の間を空ける為の指定です



<table>タグ　属性



属性 意味
border=n 枠線の太さを指定します。この属性を記述しない、または、0 を指定すると枠線を表示しません。HTML5 では 1 のみ指定可能で、太さはスタイルシートを用いるようになります
bordercolor=color 枠線の色を指定します。HTML5 には採用されていません。代わりに border-color を使用してください
bordercolordark=color 立体的な枠線の暗い部分の色を指定します
bordercolorlight=color 立体的な枠線の明るい部分の色を指定します
frame=frame 各セルの上下左右の枠線について、表示する/しないを制御します。HTML5 では廃止されました。
　　void：表示しない。(既定値)
　　above：上側のみ。
　　below：下側のみ。
　　hsides：上下のみ。
　　vsides：左右のみ。
　　lhs：左側(Left Hand Side)のみ。
　　rhs：右側(Right Hand Side)のみ。
　　box：上下左右。
　　border：上下左右。
rules=rules テーブルの内側の枠線を表示するルールを指定します。HTML5 では廃止されました。
　　none：表示しない。
　　groups：<thead>, <tbody>, <tfoot> で指定したグループの境界のみ。
　　rows：横方向のみ。
　　cols：縦方向のみ。
　　all：すべて。(既定値)
background=url 背景画像を指定します。<tr>, <th>, <td> でも指定可能です。スタイルシートの場合は backgroung-image を使用してください
bgcolor=color 背景色を指定します。<tr>, <th>, <td> でも指定可能です。スタイルシートの場合は backgroung-color を使用してください
align=align テーブルの表示位置を指定します。
　　center：中央表示(H3/e2/Ch/Fx/Sa/Op/N4)
　　left：左端表示(H2/e2/Ch/Fx/Sa/Op/N2)(既定値)
　　right：右端表示(H2/e2/Ch/Fx/Sa/Op/N2)
cellpadding=n 枠線とセルの内容の間の隙間をピクセル単位で指定します
cellspacing=n 内枠の太さを指定します。0 を指定すると、立体感の無い枠線を表示することができます
width=n テーブルの横幅をピクセルまたはパーセンテージで指定します
height=n テーブルの高さをピクセルまたはパーセンテージで指定します
hspace=n テーブルの周りの横方向の余白をピクセル単位で指定します
vspace=n テーブルの周りの縦方向の余白をピクセル単位で指定します
cols=n 列数を指定します。この属性を指定することにより、テーブルの表示速度が若干速くなる場合がある
datapagesize=size データバインド機能を用いる際の、レコード数を指定します
datasrc=datasrc データバインド機能を用いる際の、データソースの ID を指定します
summary=summary 音声読み上げブラウザなどのために、この表の目的や構成の説明を記述します。HTML4.01 では必須属性とされていましたが、HTML5 では廃止されました



一般属性



属性 意味
accesskey=key アクセスキーを指定します
class=class クラスを指定します
contenteditable=bool 要素を編集可能にします
dir=dir 文字の表示方向を指定します
hidden 要素を非表示にします
id=id ID を指定します
lang=lang 言語を指定します
spellcheck=bool スペルをチェックします
style=style スタイルシートを指定します
tabindex=n タブインデックスを指定します
title=title タイトルを指定します
translate=title 翻訳可否を指定します



table-layout プロパティ



table-layoutプロパティは、テーブル（表）の表示する際、テーブル（表）の列幅を自動レイアウトにするか（auto）
固定レイアウトにするか（fixed）についてを指定することができます

初期値のtable-layout:auto; では、ブラウザはテーブル（表）全体を読み込んでから、セル内容に合わせて各列の幅を決定して表示を開始しますが、 table-layout:fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあります

table-layoutプロパティに 「fixed」 を指定する場合には、必要に応じて各列（セル）の幅を指定しますが、幅が指定されていない列には残りの幅が均等に割り当てられます


値 意味 備考
auto テーブル（表）の列幅を自動レイアウトにする（初期値） いずれの場合も行の高さは自動的に算出されます
fixed テーブル（表）の列幅を固定レイアウトにする



overflow プロパティ



overflowプロパティは、ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します


値 意味
visible 初期値です
ボックスに入りきらない部分は、ボックスからはみ出して表示されます
（注．Internet Explorerでは、ボックスが内容に合わせて拡張されます）
scroll 入りきらない内容はスクロールして見られるように、スクロールバーが付きます
hidden はみ出た部分は表示されません
auto ブラウザに依存します （一般的にはスクロールして見られるようになります）


visible 表示
記述例
CSS		 <style>
  .cl_overflow-visible_150x50{
    width: 150px;
    height: 100px;
    background: #ffeeee;
    overflow: visible;
  }
</style>
HTML1 <div class="cl_overflow-visible_150x50">
  <p style="line-height : 150%;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん</p>
</div>
HTML2 <table class="cl_overflow-visible_150x50" width="150" height="50">
  <tbody>
    <tr>
      <td style="line-height : 150%;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん</td>
    </tr>
  </tbody>
</table>
表示例 HTML1 HTML2

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん


scroll スクロール
記述例
CSS		 <style>
  .cl_overflow-scroll_150x50{
    width: 150px;
    height: 100px;
    background: #ffeeee;
    overflow: scroll;
  }
</style>
HTML1 <div class="cl_overflow-scroll_150x50">
  <p style="line-height : 150%;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん</p>
</div>
HTML2 <table class="cl_overflow-scroll_150x50" width="150" height="50">
  <tbody>
    <tr>
      <td style="line-height : 150%;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん</td>
    </tr>
  </tbody>
</table>
表示例 HTML1 HTML2

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん
hidden 非表示
記述例
CSS		 <style>
  .cl_overflow-hidden_150x50{
    width: 150px;
    height: 100px;
    background: #ffeeee;
    overflow: hidden;
  }
</style>
HTML1 <div class="cl_overflow-hidden_150x50">
  <p style="line-height : 150%;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん</p>
</div>
HTML2 <table class="cl_overflow-hidden_150x50" width="150" height="50">
  <tbody>
    <tr>
      <td style="line-height : 150%;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん</td>
    </tr>
  </tbody>
</table>
表示例 HTML1 HTML2

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん
auto ブラウザ依存
記述例
CSS		 <style>
  .cl_overflow-auto_150x50{
    width: 150px;
    height: 100px;
    background: #ffeeee;
    overflow: auto;
  }
</style>
HTML1 <div class="cl_overflow-auto_150x50">
  <p style="line-height : 150%;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん</p>
</div>
HTML2 <table class="cl_overflow-auto_150x50" width="150" height="50">
  <tbody>
    <tr>
      <td style="line-height : 150%;">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん</td>
    </tr>
  </tbody>
</table>
表示例 HTML1 HTML2

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやらわん





<table>タグ　SEOへの影響


<table>タグ（テーブルタグ）は表を表すタグで、ページのレイアウトに使うのは、正しい使い方とは言えませんが、特に影響はありません
<table>タグ（テーブルタグ）を使用する際、<summary>属性を指定すると、表が何を表しているのかが伝わり易くなります
<th>タグ（項目タグ）と、<td>タグ（内容データタグ）とを使い分けましょう

＜補足＞
SEO （ Search Engine Optimization ： 検索エンジン最適化 ） とは、Google、Yahoo!、Goo 等の検索サイトで検索された際に、検索結果表示ページ（SERP ： サープ ： Search Engine Result Page ）の前の方（上位）に表示されるように工夫して、ホームページ、ブログをつくることです
そのために用いる方法をSEO対策と言い、適切に使うことによりSEOに効果のあるタグがあります
SEO対策について、詳しくお知りになりたい場合、詳細は、「 SEO対策　SEOとは 」をご参照下さい

目次　｜　元のページ 前のページ　｜　次のページ サイトマップ　｜　ページTOP
ホーム　＞　HPB19　＞　HTML タグ辞典　＞　<table>タグ
HPB18　｜　HPB19 コンテンツ一覧
　 　

© 2014 abhp.net All Rights Reserved.

参考情報


table - テーブル(表)
table-layout－スタイルシートリファレンス
overflow－スタイルシートリファレンス
いろいろと便利なoverflow:hidden;についてのあれこれ | CRAブログ - Web/IT・教育・福祉業界の情報を、スタッフ＆インターン生が配信中！
【HTML】Tableの幅を固定する 020_流通システム部| システム開発ブログ(システム開発のアイロベックス｜東京都中央区の業務システム開発会社)

HTML タグ辞典

 ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP