開発者ドキュメント

HTMLでテーブルを作成する方法

getdocs

序章

テーブルは、行と列で編成されたデータのセットです。 テーブルは、製品とそのコスト、雇用と雇用日、フライトと出発時刻などのデータタイプ間の接続を表示するのに役立ちます。 このチュートリアルでは、HTMLを使用してテーブルを作成し、必要な数の行と列を追加してテーブルをカスタマイズし、行と列の見出しを追加してテーブルを読みやすくします。

前提条件

HTMLテーブルの基礎

HTMLテーブルは、開始<table>タグと終了</table>タグで作成されます。 これらのタグ内では、テーブル行の開始と終了<tr>タグ、およびテーブルデータの開始と終了<td>タグを使用して、データが行と列に編成されます。

テーブル行<tr>タグは、データの行を作成するために使用されます。 テーブルの開閉<tr>タグ内で、テーブルの開閉データ<td>タグを使用して、データを列に整理します。

例として、2行3列のテーブルを次に示します。

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

HTMLテーブルが実際にどのように機能するかを調べるには、上記のコードスニペットをindex.htmlファイルまたはこのチュートリアルで使用している他のhtmlファイルに貼り付けてください。

ファイルを保存してブラウザにリロードし、結果を確認します。 （ブラウザにファイルをロードする手順については、HTML要素に関するチュートリアルのこのステップにアクセスしてください。）

これで、Webページに3列2行のテーブルが作成されます。

行を追加するには、強調表示された<tr>要素をテーブルの下部に追加します。

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

結果を保存し、ブラウザで確認します。 次のようなものを受け取るはずです。

別の列を追加するには、各テーブル行<tr>要素内にテーブルデータ<td>要素を追加してみてください。

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4 </td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

結果を保存し、ブラウザで確認します。 Webページには、3行4列のテーブルが表示されます。

テーブルに境界線を追加する

一般に、テーブルはCSSでスタイル設定する必要があります。 CSSがわからない場合は、<table>要素に属性を追加することで、HTMLを使用して簡単なスタイルを追加できます。 たとえば、border属性を使用してテーブルに境界線を追加できます。

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

ハイライトされたborder属性をテーブルに追加し、ブラウザーで結果を確認します。 （index.htmlファイルをクリアして、上記のHTMLコードスニペットに貼り付けることができます。）ファイルを保存して、ブラウザーにロードします。 これで、テーブルの各行と列を次のように囲む境界線が表示されます。

行と列に見出しを追加する

表を読みやすくするために、行と列に見出しを追加できます。 表の見出しは、表のデータと視覚的に区別できるように、太字の中央揃えのテキストで自動的にスタイル設定されます。 見出しは、スクリーンリーダーを使用する個人がテーブルデータをナビゲートするのに役立つため、テーブルへのアクセスも容易になります。

見出しは、<th>タグの開始と終了を使用して追加されます。 たす桁ヘッダー、新しいものを挿入する必要があります

テーブルの上部にある要素で、を使用して列名を追加できます<th>タグ。

index.htmlファイルをクリアし、次のコードスニペットを使用して列見出しの行を追加します。

<table border="1">
  <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
</table>

index.htmlファイルを保存し、ブラウザにリロードします。 次のようなものを受け取るはずです。

Webページには、1行の列ヘッダーが表示されます。 最初の列ヘッダーが空であることに注意してください。 必要に応じて、ここに列ヘッダーを追加できます。

行ヘッダーを追加するには、すべてのテーブル行<tr>要素の最初の項目として開始タグと終了タグ<th>タグを追加する必要があります。 [X.168X]

モバイルバージョンを終了