HTML <table> タグ

定義と使用方法

<table> HTML テーブルのタグを定義しました。

HTML テーブルは1つの <table> 要素と1つ以上 <tr>、<th> および <td> 要素構成：

HTML テーブルには以下の要素も含まれます：

も参照してください：

HTML チュートリアル：HTML テーブル

HTML DOM リファレンスマニュアル：Table オブジェクト

CSS チュートリアル：テーブルのスタイルを設定する

インスタンス

例 1

簡単な HTML テーブルで、2列と2行を含んでいます：

<table>
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
</table>

自分で試してみる

例 2

テーブルに折り畳みボーダーを追加する方法（CSSを使用）：

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

自分で試してみる

例 3

テーブルを右に配置する方法（CSSを使用）：

<table style="float:right">
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>

自分で試してみる

例 4

テーブルを中央に配置する方法（CSSを使用）：

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>

自分で試してみる

例 5

テーブルに背景色を追加する方法（CSSを使用）：

<table style="background-color:#00FF00">
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>

自分で試してみる

例 6

テーブルにインラインパディングを追加する方法（CSSを使用）：

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

自分で試してみる

例 7

テーブルの幅を設定する方法（CSSを使用）：

<table style="width:400px">
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>

自分で試してみる

例 8

表頭の作成方法は：

<table>
  <tr>
    <th>名前</th>
    <th>メール</th>
    <th>電話</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

自分で試してみる

例 9

タイトル付きテーブルの作成方法は：

<table>
  <caption>月次貯金</caption>
  <tr>
    <th>月</th>
    <th>貯金</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>￥4500</td>
  </tr>
</table>

自分で試してみる

例 10

多行や多列を跨ぐテーブルセルの定義方法は：

<table>
  <tr>
    <th>名前</th>
    <th>メール</th>
    <th colspan="2">電話</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

自分で試してみる

グローバル属性

<table> タグは以下のイベント属性をサポートしています HTMLのグローバル属性。

イベント属性

<table> タグは以下のイベント属性をサポートしています HTMLのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値で表示します <table> 要素：

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

自分で試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート