作って学べるプログラミング講座
アプリを作りながら学習
自分のペースですぐに始められる
困ったら何回でも質問可能
リファレンス

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

Sara

<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 タグ一覧はこちら

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました!
>> お問い合わせはこちら
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました