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

投稿日: 2022-04-20 2022-04-20
タグ: html, Spin Up

序章

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

前提条件

HTMLに精通していること。 HTMLに慣れていない場合、または復習が必要な場合は、HTMLを使用してWebサイトを構築する方法チュートリアルシリーズの最初の3つのチュートリアルを確認できます。
HTMLテーブルの作成を練習するためのindex.htmlファイル。 index.htmlファイルの作成方法がわからない場合は、簡単なチュートリアル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行のテーブルが作成されます。

3 columns, 2 rows table

行を追加するには、強調表示された<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>

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

3 Columns and 3 Rows 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列のテーブルが表示されます。

Webpage displaying table with three rows and four columns

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

一般に、テーブルは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コードスニペットに貼り付けることができます。）ファイルを保存して、ブラウザーにロードします。これで、テーブルの各行と列を次のように囲む境界線が表示されます。

Webpage displaying table with border

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

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

見出しは、<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ファイルを保存し、ブラウザにリロードします。次のようなものを受け取るはずです。

Webpage displaying HTML column headings

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

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

getdocs

13036