ホームページ > ウェブフロントエンド > htmlチュートリアル > テーブルタグの深い理解_HTML/Xhtml_Webページ制作

テーブルタグの深い理解_HTML/Xhtml_Webページ制作

WBOY
リリース: 2016-05-16 16:46:07
オリジナル
1758 人が閲覧しました

テーブルは昔から皆さんに使われているタグですが、現在もウェブサイトの再構築に伴い、レイアウトにテーブルを使用しないことをお勧めします。テーブルを使用することはいわゆる非標準です。実際には、テーブルは重要な要素です。
少し前に、テーブルに含まれる主要なタグを探していました。それを見つけたので、もちろん共有したいと思いました。
table タグに含まれる主なタグは、table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup です。それぞれの概要は次のとおりです。

table タグでテーブルを定義できます。
タグ内に、表のタイトル、表の行、表の列、表のセル、およびその他の表を配置できます。

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

テーブルのヘッダーを定義します。
thead、tfoot、tbody 要素を使用すると、テーブル内の行をグループ化できます。テーブルを作成するときは、おそらくヘッダー行、データを含むいくつかの行、そして最後に合計行を配置する必要があるでしょう。この分割により、ブラウザはテーブルのヘッダーやフッターとは独立してテーブル本体のスクロールをサポートできるようになります。長い表を印刷する場合、表データを含む各ページに表のヘッダーとフッターを印刷できます。

テーブル本体(テキスト)を定義します。
タグを使用すると、表を別のセクションに分割できます。 タグは、テーブル内の 1 つまたは複数の行をグループ化します。
テーブルに 1 つまたは 2 つ以上の タグを含めることもできますが、テーブルには タグを含めないことをお勧めします。
タグのうち、テーブル行を定義できるのは タグだけです。 タグは一度定義されると、テーブルの独立した部分になります。たとえば、ある から別の に渡ることはできません。
thead、tfoot、tbody 要素を使用すると、テーブル内の行をグループ化できます。テーブルを作成するときは、おそらくヘッダー行、データを含むいくつかの行、そして最後に合計行を配置する必要があるでしょう。この分割により、ブラウザはテーブルのヘッダーやフッターとは独立してテーブル本体のスクロールをサポートできるようになります。長い表を印刷する場合、表データを含む各ページに表のヘッダーとフッターを印刷できます。

表のフッター (脚注) を定義します。
thead、tfoot、tbody 要素を使用すると、テーブル内の行をグループ化できます。テーブルを作成するときは、おそらくヘッダー行、データを含むいくつかの行、そして最後に合計行を配置する必要があるでしょう。この分割により、ブラウザはテーブルのヘッダーやフッターとは独立してテーブル本体のスクロールをサポートできるようになります。長い表を印刷する場合、表データを含む各ページに表のヘッダーとフッターを印刷できます。

テーブル内の 1 つ以上の列の属性値を定義します。この属性はテーブルまたはコルグループでのみ使用できます。

テーブル列のグループ化を定義します。この要素を使用すると、書式設定の目的で列をグループ化できます。この要素は、

caption 要素はテーブルのタイトルを定義します。キャプション タグは、テーブル タグの直後に続ける必要があります。テーブルごとに 1 つのタイトルだけを定義できます。通常、タイトルはテーブルの上の中央に配置されます。

テーブル内のヘッダー セルを定義します。この th 要素内のテキストは通常​​、太字で表示されます。

テーブル内のセルを定義します。
タグ内でのみ有効です。
タグを使用するには 2 つの方法があります。1 つは単に複数の同一の列を定義する方法、もう 1 つは複数の異なる列を組み合わせる方法です。
追記: 上記のコンテンツはすべて w3school からのものです。w3school が著作権情報に著作権をマークしており、すべての権利を留保しているためです。その後、転送も編集もせず、その一部だけを取り出します。クリックすると、特定のタグの詳細な紹介が直接表示されます。テーブルの概要もご覧いただけます。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート