HTMLテーブルタグ データを表形式 (行 * 列) で表示するために使用されます。 1 行に多くの列を含めることができます。

次を使用して、データを表形式で表示するテーブルを作成できます。

各テーブルでは、テーブルの行は次のように定義されます。タグ、テーブルヘッダーは次のように定義されます、テーブルデータは次のように定義されます。タグ。

HTML テーブルは、ページのレイアウトを管理するために使用されます。ヘッダーセクション、ナビゲーションバー、本文コンテンツ、フッターセクションなど。ただし、ページのレイアウトを管理するには、テーブルの上に div タグを使用することをお勧めします。

HTML テーブルタグ

HTML テーブルの例

HTMLのtableタグの例を見てみましょう。出力は上に示されています。

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

出力：

10mlってどのくらいですか

上記の HTML テーブルには、5 行 3 列 = 5 * 3 = 15 個の値があります。

枠線付きの HTML テーブル

HTML テーブルの境界線を指定するには 2 つの方法があります。

1. HTMLのテーブルのborder属性による
2. CSSのborderプロパティによる

1) HTML Border 属性

HTMLのtableタグのborder属性を使用して枠線を指定できます。しかし、現在は推奨されていません。

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

出力：

2) CSS Border プロパティ

表の枠線を指定するにはCSSのborderプロパティを使用することが推奨されるようになりました。

 table, th, td { border: 1px solid black; } 

border-collapse プロパティを使用すると、すべての境界線を 1 つの境界線に折りたたむことができます。国境を一つに崩壊させてしまいます。

Javaチェックがnullです

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

出力：

セルパディングを含む HTML テーブル

テーブル ヘッダーとテーブル データのパディングは、次の 2 つの方法で指定できます。

1. HTMLのテーブルのcellpadding属性による
2. CSSのパディングプロパティによる

HTML table タグの cellpadding 属性は廃止されました。 CSSを使用することをお勧めします。それではCSSのコードを見てみましょう。

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

出力：

HTML テーブルの幅:

を使用して HTML テーブルの幅を指定できます。 CSS幅 財産。ピクセルまたはパーセンテージで指定できます。

ご要望に応じてテーブルの幅を調整できます。以下はテーブルを幅付きで表示する例です。

 table{ width: 100%; } 

例：

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

出力：

Colspan を含む HTML テーブル

セルを複数の列にまたがるようにしたい場合は、colspan 属性を使用できます。

1 つのセル/行を複数の列に分割します。列の数は、colspan 属性の値によって異なります。

2 つの列にまたがる例を見てみましょう。

CSSコード:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

HTMLコード:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

出力：

行範囲を含む HTML テーブル

セルを複数の行にまたがる場合は、rowspan 属性を使用できます。

セルを複数の行に分割します。分割される行の数は行スパンの値によって異なります。

2 行にわたる例を見てみましょう。

CSSコード:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

HTMLコード:

np 平均

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

出力：

キャプション付きの HTML テーブル

HTML キャプションが表の上に表示されます。 table タグの後にのみ使用する必要があります。

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

HTML テーブルの偶数セルと奇数セルのスタイル設定

CSSコード:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

出力：

注: テーブル内のさまざまな CSS プロパティを使用して、さまざまなタイプのテーブルを作成することもできます。

サポートするブラウザ

要素	クロム	IE	Firefox	オペラ	サファリ
	はい	はい	はい	はい	はい