close

HTML のテーブル: HTML でのテーブルの作成と書式設定に関するガイド

テーブルは、行と列を含む構造化形式でデータを表示するための HTML の重要なコンポーネントです。 HTML では、表は <table>、<tr>、および <td> タグを使用して作成されます。

<table> タグは、すべての行と列を含むメイン テーブル コンテナを表します。 行は <tr>(テーブル行) タグを使用して定義され、行内のセルは <td>(テーブル データ) タグを使用して定義されます。 さらに、<th>(テーブル ヘッダー) タグを使用して、テーブルのヘッダー セルを定義できます。

Colspan や rowspan などの属性を使用して、テーブル内のセルを結合したり、セルを複数の行や列にまたがったりすることができます。 さらに、CSS プロパティを適用して、テーブルの外観とレイアウトをカスタマイズできます。

 

表( <table>)

- この <table> 要素は、HTML でテーブルを作成するために使用されます。

- データは行( <tr>) と列(<td> または <th>) に配置されます。

- 各データ セルは、 <td>(データ セル) 要素または <th>(ヘッダー セル) 要素内に配置されます。 

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>

 

列ヘッダー( <th>)

- この <th> 要素は、テーブルに列ヘッダーを作成するために使用されます。

- 通常、テーブルの最初の行に配置されます。 

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>

 

データ行( <tr>):

- この <tr> 要素は、テーブル内にデータ行を作成するために使用されます。

- データ セル( <td>) またはヘッダー セル() はこれらの 要素 <th> 内に配置されます。 <tr> 

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>

 

列の広がり( colspan)

この colspan 属性は、テーブル内のデータ セルまたはヘッダー セルがまたがる列の数を決定するために使用されます。 

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>

 

行の広がり( rowspan)

この rowspan 属性は、テーブル内のデータ セルまたはヘッダー セルがまたがる行数を決定するために使用されます。 

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>

 

セル(colspan と rowspan)を結合する

colspan との両方の rowspan 属性を組み合わせて、表内のセルを結合 できます。 

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>

 

border 財産

- border プロパティは表の境界線の太さを指定します。

- の値は border 負ではない整数です。 

<table border="1">  
<!-- Table rows and columns -->  
</table>

 

cellpadding 財産

- 、この cellpadding プロパティは、テーブル内のセルの内容とセルの境界線の間の距離を指定します。

- の値は cellpadding 負ではない整数です 

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>

 

cellspacing 財産

- この cellspacing プロパティは、テーブル内のセル間の間隔を指定します。

- の値は cellspacing 負ではない整数です。 

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>

 

これらの属性と要素を使用すると、ニーズに応じて HTML でテーブルを作成およびカスタマイズできます。 これらを使用すると、Web サイト上にデータをわかりやすく整理して表示できます。