HTMLテーブル - HTML チュートリアル

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

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

要素の助けを借りて、

、そして	要素。

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

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

HTML テーブルタグ

鬼ごっこ

説明

テーブルを定義します。

テーブル内の行を定義します。

テーブル内のヘッダーセルを定義します。

テーブル内のセルを定義します。

テーブルのキャプションを定義します。

フォーマットするテーブル内の 1 つ以上の列のグループを指定します。

これは、各列の列プロパティを指定するために要素とともに使用されます。

これは、本文のコンテンツをテーブルにグループ化するために使用されます。

これは、テーブル内のヘッダーの内容をグループ化するために使用されます。

これは、テーブル内のフッターのコンテンツをグループ化するために使用されます。

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ってどのくらいですか

ファーストネーム	苗字	マーク
Sonoo	ジャイシュワル	60
ジェームス	ウィリアム	80
スワティ	シローニ	82
モーション	シン	72

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

枠線付きの HTML テーブル

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

HTMLのテーブルのborder属性による
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>

今すぐテストしてください

出力：

ファーストネーム	苗字	マーク
Sonoo	ジャイシュワル	60
ジェームス	ウィリアム	80
スワティ	シローニ	82
モーション	シン	72

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; }

今すぐテストしてください

出力：

名前	苗字	マーク
Sonoo	ジャイシュワル	60
ジェームス	ウィリアム	80
スワティ	シローニ	82
モーション	シン	72

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

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

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

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

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

今すぐテストしてください

出力：

名前	苗字	マーク
Sonoo	ジャイシュワル	60
ジェームス	ウィリアム	80
スワティ	シローニ	82
モーション	シン	72

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>

今すぐテストしてください

出力：

名前	携帯番号
アジート・マウリヤ	7503520801	9555879135

行範囲を含む 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>

今すぐテストしてください

出力：

名前	アジート・マウリヤ
携帯番号	7503520801
9555879135

キャプション付きの 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; }

今すぐテストしてください

出力：