リファレンス

<table>要素の使い方・サンプルコード


 

<table>

<table>要素は、行と列を組み合わせてデータを表示するテーブル(表)を作成します。

デモ:<table> 要素

 
 
 

属性

グローバル属性

全ての HTML 要素に共通して使用できるグローバル属性はこちら
 

非推奨になった属性

HTML 5 では以下の属性が非推奨となりました。同じようなスタイルを適用したい場合は CSS を使用してください。

非推奨になった属性代替 HTML 要素・CSS プロパティ
alignmargin
bgcolorbackground-color
borderborder, border-color, border-style, border-width
cellpaddingborder-collapse, padding
cellspacingborder-spacing
frameborder, border-color, border-style, border-width
rulesborder, border-color, border-style, border-width
summary<caption> 要素
widthwidth

 
 
 

使用例

例① シンプルな表

HTML
<table>
<tr>
  <th>商品名</th>
  <th>値段</th>
</tr>
<tr>
  <td>商品A</td>
  <td>&yen;1000</td>
</tr>
<tr>
  <td>商品B</td>
  <td>&yen;1500</td>
</tr>
<tr>
  <td>商品C</td>
  <td>&yen;2000</td>
</tr>
</table>
実行結果

 

例② シンプルな表(キャプション付き)

HTML
<table>
<caption>商品一覧</caption>
<tr>
  <th>商品名</th>
  <th>値段</th>
</tr>
<tr>
  <td>商品A</td>
  <td>&yen;1000</td>
</tr>
<tr>
  <td>商品B</td>
  <td>&yen;1500</td>
</tr>
<tr>
  <td>商品C</td>
  <td>&yen;2000</td>
</tr>
</table>
実行結果

 

例③ シンプルな表(thead, tbody, tfoot 付き)

HTML
<table>
<thead>
  <tr>
    <th>商品名</th>
    <th>値段</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>商品A</td>
    <td>&yen;1000</td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>&yen;1500</td>
  </tr>
  <tr>
    <td>商品C</td>
    <td>&yen;2000</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>合計</td>
    <td>&yen;4500</td>
  </tr>
</tfoot>
</table>
実行結果

 

例④ colgroup を使った表

HTML
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>商品名</th>
    <th>値段</th>
    <th>色</th>
    <th>在庫数</th>
  </tr>
  <tr>
    <td>商品A</td>
    <td>&yen;1000</td>
    <td>赤</td>
    <td>100</td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>&yen;1500</td>
    <td>青</td>
    <td>100</td>
  </tr>
  <tr>
    <td>商品C</td>
    <td>&yen;2000</td>
    <td>黒</td>
    <td>50</td>
  </tr>
</table>
実行結果

 

例⑤ col を使った表

HTML
<table>
  <colgroup>
    <col>
    <col span="2" style="background-color: skyblue;">
    <col span="2" style="background-color: pink;">
  </colgroup>
  <tr>
    <td></td>
    <th>電車A</th>
    <th>電車B</th>
    <th>バスA</th>
    <th>バスB</th>
  </tr>
  <tr>
    <th>所要時間</th>
    <td>20分</td>
    <td>40分</td>
    <td>50分</td>
    <td>70分</td>
  </tr>
</table>
実行結果

 

例⑥ rowspan と colspan を使ったテーブル

HTML
<table class="table">
  <thead>
    <tr>
      <th rowspan="2">A</th>
      <th colspan="2">B</th>
    </tr>
    <tr>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td rowspan="2">3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td colspan="2">6</td>
    </tr>
    <tr>
      <td colspan="3">7</td>
    </tr>
  </tbody>
</table>
CSS
.table {
  width: 300px;
  border-collapse: collapse;
}
.table th, .table td {
  border: 1px solid lightgrey;
}
.table td {
  text-align: center;
}
実行結果

 

例⑦ CSS でスタイルをつけた表

HTML
<table class="table">
<caption>商品一覧</caption>
<thead>
  <tr>
    <th>商品名</th>
    <th>値段</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>商品A</td>
    <td>&yen;1000</td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>&yen;1500</td>
  </tr>
  <tr>
    <td>商品C</td>
    <td>&yen;2000</td>
  </tr>
</tbody>
</table>
CSS
.table {
  width: 50%;
  border-collapse: collapse;
}
.table th, .table td {
  border: 1px solid lightgrey;
  padding: 6px;
}
.table th {
  background-color: skyblue;
}
実行結果

 
 
 

対応ブラウザ

 
 
 

関連するタグ

 

HTML タグ一覧はこちら

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
guest
0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx