<テーブル>


HTML <table> タグ

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
</table>

</body>
</html>

インスタンスの実行 »

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します

ブラウザのサポート

1000.png

すべての主要なブラウザは <table> タグをサポートしています。

タグの定義と使用方法

<table> HTML テーブル

HTML テーブルには、1 つ以上の <tr>、<th> 要素が含まれます。

<tr> 要素はテーブルの行を定義し、<th> 要素はテーブルのセルを定義します。

さらに複雑な HTML テーブルには、<caption>、<col>、<colgroup>、<thead>、<tfoot> 要素も含まれる場合があります。

HTML 4.01とHTML5の違い

HTML5では、「border」属性のみがサポートされ、値「1」または「」のみが許可されます。

プロパティ

プロパティ値説明
整列左
センター
そうですね		HTML5はサポートされていません。 HTML 4.01 は非推奨になりました。 周囲の要素に対するテーブルの配置を指定します。
bgcolorrgb(x,x,x)
#xxxxxx
カラー名		HTML5 はサポートされていません。 HTML 4.01 は非推奨になりました。 テーブルの背景色を指定します。
ボーダー1
""		表のセルに枠線があるかどうかを指定します。
cellpaddingピクセルHTML5はサポートされていません。 セルの端とその内容の間のスペースを指定します。
セル間隔ピクセルHTML5はサポートされていません。 セル間のスペースを指定します。
フレーム無効
上
以下
サイド

rhs
反対
ボックス
Border		HTML5 はサポートされていません。 外側の境界線のどの部分を表示するかを指定します。
ルールなし
グループ
行
コル
すべて		HTML5 はサポートされていません。 内側の境界線のどの部分を表示するかを指定します。
概要テキストHTML5はサポートされていません。 フォームの概要を規定します。
幅ピクセル
%		HTML5はサポートされていません。 テーブルの幅を指定します。

グローバル属性

<table> タグは HTML グローバル属性をサポートします。

イベント属性

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

Examples

試してみる - 例

テーブルのタイトル
この例は、テーブルのタイトルを表示する方法を示します。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>表格使用水平标题:</h4>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
  </tr>
</table>

<h4>表格使用垂直标题:</h4>
<table border="1">
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Telephone:</th>
    <td>555 77 854</td>
  </tr>
</table>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

空のセル
この例では、「 」を使用してコンテンツのないセルを処理する方法を示します。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>一些文本</td>
  <td>一些文本</td>
</tr>
<tr>
  <td></td>
  <td>一些文本</td>
</tr>
</table>

<p>如果在上面的空单元格中没有边框，你可以插入一个空格 ： &nbsp;</p>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

タイトル付きのテーブル
この例は、タイトル付きのテーブルを示しています。

例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
</table>

</body>
</html>

例の実行 »

オンライン例を表示するには、[例の実行]ボタンをクリックしてください

テーブル内のラベル
この例は、他の要素内に要素を表示する方法を示します。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

インスタンスの実行 »

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください

行または列にまたがる表のセル
この例では、行または列にまたがる表のセルを定義する方法を示します。 。

例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

例の実行»

「例の実行」ボタンをクリックしてオンライン例を表示します

関連記事

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

HTML DOMリファレンスマニュアル: テーブルオブジェクト