この記事では、HTMLでテーブルを作成する方法を紹介します。これにより、colspan、 rowspan 、 cellpadding 、 cellspacingなどのテーブルのプロパティを知ることができます。

HTMLテーブルは、データを表形式で表示するために使用されます。各テーブルは、列と行の2つのコンポーネントに分割されます。それらは、タグtable 、 tr 、 td 、 tbody 、 thead 、 tfootで構成されています。

Webアプリケーションでは、テーブルが使用されることはめったになく、データ管理アプリケーションのみが頻繁に使用されます。その理由は、テーブルの構造が非常に重く見えるため、CSSと組み合わせて複雑なインターフェイステンプレートを作成することが難しいためである可能性があります。ただし、テーブルデータの表示では、テーブルが依然として最優先事項です。

HTMLのテーブルタグとは何ですか？

HTMLのtableタグは、ブラウザに表形式のデータを表示するために使用される特別なタグです。各テーブルには、定義された数の行と列があります。 Wordの場合と同様に、隣接する2つのセルを1つのセルに結合することもできます。このカードの詳細については、下の図を参照してください。

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td>Hàng 1 cột 1</td> <td>Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

その中で：

• border="1"プロパティは、テーブルの境界線を宣言するためのものです
• cellspacing="0"属性は、境界線の上部と下部の境界線間の距離を宣言します
• cellpadding="5"属性は、セル内のコンテンツと境界線の間の距離を宣言します
• 列を追加する場合は、 tdを追加するだけです。
• 行を追加する場合は、もう1 tr追加するだけです

監視するtrタグとtdタグの数を手動で変更してください。これにより、テーブルをよりよく理解できます。

HTMLのColspan

Colspan htmlはテーブルタグの属性であり、同じ行のセルをマージするために使用されます。たとえば、2つのセルをマージする場合は、その値を2として宣言し、3つのセルをマージし、3を宣言します。

colspanを宣言すると、現在の行のtdタグの数が他の行と比較して減少します。

以下の例のように、最初のtrタグには2つのtdタグしかなく、2番目のtrタグには最大3つのtdタグがあります。その理由は、最初のtrタグにcolspan = 2のtdタグがあるためです。

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td colspan="2">Hàng 1 cột 1 và Hàng 1 cột 2</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 1</td> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

HTMLの行スパン

colspanと同様に、 rowspanは2つのセルをマージするために使用されます。ただし、行ではなく列ごとに集計されます。マージするセルの数を入力します。

 <table border="1" cellspacing="0" cellpadding="5"> <tr> <td rowspan="2">Hàng 1 cột 1</td> <td>Hàng 1 cột 3</td> <td>Hàng 1 cột 3</td> </tr> <tr> <td>Hàng 2 cột 2</td> <td>Hàng 2 cột 3</td> </tr> </table>

タググループthead-tbody-tfoot

HTMLとは何かを学ぶための記事では、ヘッダー、コンテンツ、フッターなどのコンポーネントを含むWebサイトのレイアウトについて簡単に紹介しましたが、テーブルも同様です。人々はテーブルを3つの主要なコンポーネントに分割します。それは、 header 、 body 、 footerで、それぞれthead 、 tbody 、 tfootタグが付いています。

 <table border="1" cellspacing="0" cellpadding="5"> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tbody> <tr> <td> mitrun </td> <td> mitrun1001@gmail.com </td> </tr> <tr> <td> web888 </td> <td> web888.vn@gmail.com </td> </tr> </tbody> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

実行すると、インターフェイスは通常の方法と同じになります。ただし、 tbodyグループとtheadの位置を変更すると、何が起こるかがわかります。

例：thead、tbody、tfootの位置を変更します。タグ

<table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <td> TheHalfheart </td> <td> TheHalfHeart@gmail.com </td> </tr> <tr> <td> Freetuts </td> <td> Freetuts.net@gmail.com </td> </tr> </tbody> <thead> <tr> <td> Username </td> <td> Email </td> </tr> </thead> <tfoot> <tr> <td> Username </td> <td> Email </td> </tr> </tfoot> </table>

インターフェイスの実行はまだ正常です。コンパイルのルールによれば、 tbodyは一番上にあるので一番上にあるはずですが、真ん中にあります。つまり、これらのグループを使用する場合、それらが配置されている場所に関係なく、表示は引き続きthead –tbody–tfootルールに従います。

最も一般的に使用されるHTMLテーブル属性

ここでは、テーブルタグの4つの属性をHTMLで要約し、後で使用できるように保存します。

• border ：テーブルの境界線のサイズを宣言するために使用されます。
• cellspacing ：境界線の幅を宣言します。
• cellpadding ：境界線とセル内のデータの間の距離を宣言します。
• width ：列の幅を宣言します（ trタグ内）。

HTMLテーブルに関するよくある質問

HTMLで境界線のないテーブルを作成するにはどうすればよいですか？

境界線のないテーブルを作成するには、 border="0"プロパティを設定します。

 <table border="0"> </table>

表の文字とセルの境界線の間にスペースを作成する方法

cellpaddingプロパティを使用して、データとテーブルの境界の間にスペースを作成します。入力単位はピクセル単位です。

 1 2 3 <table celpadding="10"> </table>

テーブルの列の長さを設定する方法

trタグにwidthプロパティを設定して、列の長さを設定します。

 <table celpadding="10"> <tr width="20%"> </tr> <tr width="80%"> </tr> </table>

そのため、この記事では、テーブルに関連するHTMLタグを紹介しました。この記事で最初に注意することは、複数のセルを2つのタグcolspanとrowspanで組み合わせる方法です。 2つ目は、 thead 、 tbody 、およびtfootタググループを理解して、正しい位置を組み立てることです。この記事はここでやめます。このシリーズをフォローしていただきありがとうございます。