HTMLテーブル

HTML テーブルの例:

名	姓	ポイント
Jill	Smith	50
Eve	ジャクソン	94
ジョン	Doe	80
Adam	Johnson	67

オンライン例

テーブル
この例は、HTML ドキュメント内にテーブルを作成する方法を示します。

インスタンス

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

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

インスタンスの実行»

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

(他の例はこのページの下部にあります。)

HTMLテーブル

テーブルは<table>タグで定義します。各テーブルには多数の行 (<tr> タグで定義) があり、各行は多数のセル (<td> タグで定義) に分割されます。文字 td はテーブルデータ、つまりデータセルの内容を指します。データセルには、テキスト、画像、リスト、段落、フォーム、水平線、表などを含めることができます。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

に関するテーブルの例は次のように表示されます::

row 1、Cell 1row 2、Cell 1

Row 1、Cell 2
Row 2、Cell 2

HTML テーブルと境界線のプロパティ

境界線プロパティが定義されていない場合、テーブルには境界線が表示されません。これは便利な場合もありますが、ほとんどの場合は境界線を表示したいと考えます。

ボーダー付きのテーブルを表示するには、border 属性を使用します。

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

HTML テーブルヘッダー

テーブルヘッダーは、<th> タグを使用して定義されます。

ほとんどのブラウザではヘッダーが太字で中央揃えのテキストとして表示されます:

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

はブラウザで次のように表示されます:

ヘッダー 1行 1、セル 1 行2、セル1

その他の例

枠線のないテーブル
この例では、枠線のないテーブルを示します。

インスタンス

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

<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>

インスタンスの実行 »

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

テーブルの見出し
この例は、テーブルヘッダーを表示する方法を示しています。 exexample

rreee

runの例»

オンラインの例を表示する「実行の例」ボタンをクリックしてタイトルを表示します。この例は、タイトルのテーブルを示しています。インスタンスの実行»

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

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

例

<!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>
  <th>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>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</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>Telephone</th>
  <th>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>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</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>

インスタンスの実行 »

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

セル間隔 (セル間隔)
この例では、セル間隔を使用してセル間の距離を広げる方法を示します。細胞。

インスタンス

<!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>

インスタンスの実行 »

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