WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <table>「表」

<table> 「表」[読み方:テーブル]

<table>タグは、テーブル(表)を作成する場合に使用します。
<table>タグ内に、下記各タグを1つまたは、0個以上指定しテーブルを定義します。
<caption><colgroup><thead><tfoot><tbody><tr>など

HTML規格HTML4.01HTML5
使用可否
広告

<table> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツフローコンテンツを子要素にもてる場所<caption><colgroup><thead><tfoot><tbody>不可

<table> の属性

【構文】
<table>
<caption>~表題~</caption>

<thead>
<tr><th>~見出し~</th></tr>
</thead>
<tbody>
<tr><td>~内容~</td></tr>
</tbody>
<tfoot>
<tr><td>~フッタ内容~</td></tr>
</tfoot>

</table>
属性意味値のサンプルなど
border="値"セルに枠線を引く""、"1"のいずれか
sortable="値"テーブルに対してソートインターフェースを
有効にする
-
廃止された属性
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<table>タグのサンプル

<table border="1">
<caption>秋の中間テスト結果</caption>
<thead>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
</thead>
<tbody>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
<tfoot>
<tr><th>平均</th><td>83</td><td>66</td><td>66</td></tr>
</tfoot>
</table>
秋の中間テスト結果
氏名国語理科社会
山田 太郎986287
鈴木 花子857158
斉藤 一郎666552
平均836666
ページTOP

スタイルシート(CSS)を使用し見た目を変えるサンプル

<head>
<style type="text/css">
<!--
#css-s1 {background-color: #0066ff;border-spacing: 1px;border: 0px;}
#css-s1 caption {background-color: #0066ff;color: #fff;}
#css-s1 th {background-color: #d0f0ff;text-align: center;padding:3px;}
#css-s1 td {background-color: #fff;text-align: center;padding:3px;}
-->
</style>

</head>

<table id="css-s1">
<caption>秋の中間テスト結果</caption>
<thead>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
</thead>
<tbody>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
<tfoot>
<tr><th>平均</th><td>83</td><td>66</td><td>66</td></tr>
</tfoot>
</table>
秋の中間テスト結果
氏名国語理科社会
山田 太郎986287
鈴木 花子857158
斉藤 一郎666552
平均836666
ページTOP

留意事項

  • <table>は、レイアウト目的で使用すべきではありません。環境によっては、正しく動作しない場合があります。例えば、レイアウトは正しく表示されても、読み上げソフトでは正しく動作しない場合があります。レイアウトの指定は、スタイルシートで行います。
  • 複雑なテーブルには、説明情報を記述します。説明情報を記述する方法は、<p><caption>に記述するなどいくつかありますので、適切な方法で記述します。
  • 読み上げソフトで正しく動作し、説明情報が不要なわかりやすいテーブルの設計が推奨されています。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン