HTML テーブルの属性とは何ですか? HTML テーブルの 10 個の基本属性の概要-htmlチュートリアル-php.cn

HTML テーブルの属性とは何ですか? HTML テーブルの 10 個の基本属性の概要

不言

リリース： 2018-07-27 14:45:19

オリジナル

30848 人が閲覧しました

HTML テーブルの属性設定は HTML Web ページで広く使用されており、非常に重要です。そのため、次の記事では、HTML テーブルの 10 個の基本属性の概要を説明します。これら 10 個のテーブル属性の概要と特定のコード。

1. HTML テーブル属性

は、境界線を表すローカル属性 border を持ちます。この属性の値は 1 または空の文字列 ("") でなければなりません。）。この属性は境界線のスタイルを制御しませんが、CSS によって制御されます。 table 要素には tr、th、td、thead、tbody、tfoot、colgroup 要素を含めることができます。 table タグの基本属性は次のとおりです。ボーダー: あり値は 1 と 0 で、1 はボーダーがあることを意味し、0 はボーダーがないことを意味します。

bordercolor: 境界線の色を設定できます。値は色の値です。
bgcolor: テーブルの背景色を設定します。
background: 背景画像を設定します

2. HTML tr 属性

は、テーブルの行を定義するために使用されます。 HTML テーブルは行指向であるため、各行は個別に表す必要があります
tr 要素は table、thead、tbody、tfoot 要素内で使用できます
tr 要素には 1 つ以上の td または th 要素を含めることができます
その align 、bgcolor属性を設定したい場合は、CSS 設定を使用してください

3. HTML td 属性

マークされたテーブルのフッターを定義するために使用されます

注:

、

タグには タグを含める必要があります。 タグは

テーブルのセルを定義するために使用され、colspan、rowspan、および headers のローカル属性で使用できます。 (1)colspan: 列のスパン、この属性はセルがまたがることができる列の数を指定します。この属性の値は整数である必要があります (2)rowspan: 行のスパン、この属性はセルがまたがる行の数を指定します。セルは複数にまたがることができ、この属性の値は整数である必要があります (3)headers: この属性の値は 1 つ以上のセルの ID 属性値であり、セルを列ヘッダーに関連付け、次の目的で使用できます。スクリーンリーダーを使用してください注: 各テーブルには上記の 3 つの要素が含まれている必要があります 4. HTML の th 属性	を使用してタイトルセルを定義し、データとデータを効果的に区別できるようにします。その説明	要素と同じです。同じローカル属性を持ちますが、この 2 つの違いは次のとおりです:	はヘッダータグを表し、通常は最初の行または列に配置されます。。さらに、	のテキストはデフォルトで太字になりますが、	はセルの特定のデータを示すデータマークです td、Top または Bottom の値を取得できます。 ; テーブルのヘッダーとテーブルヘッダーのラッパーを定義するために使用されます。 1 つ以上の行を定義できます。これらの行は table 要素の列ラベルです。thead 要素がない場合、すべての tr はテーブルの本体に属しているとみなされます。定義するテーブルの本体 7、HTML tfoot 属性

テーブルのセルを定義するために使用され、colspan、rowspan、および headers のローカル属性で使用できます。

(1)colspan: 列のスパン、この属性はセルがまたがることができる列の数を指定します。この属性の値は整数である必要があります

(2)rowspan: 行のスパン、この属性はセルがまたがる行の数を指定します。セルは複数にまたがることができ、この属性の値は整数である必要があります

(3)headers: この属性の値は 1 つ以上のセルの ID 属性値であり、セルを列ヘッダーに関連付け、次の目的で使用できます。スクリーンリーダーを使用してください

注:

各テーブルには上記の 3 つの要素が含まれている必要があります

4. HTML の th 属性

を使用してタイトルセルを定義し、データとデータを効果的に区別できるようにします。その説明

要素と同じです。同じローカル属性を持ちますが、この 2 つの違いは次のとおりです:

はヘッダータグを表し、通常は最初の行または列に配置されます。。さらに、

のテキストはデフォルトで太字になりますが、

はセルの特定のデータを示すデータマークです td、Top または Bottom の値を取得できます。

;

テーブルのヘッダーとテーブルヘッダーのラッパーを定義するために使用されます。 1 つ以上の行を定義できます。これらの行は table 要素の列ラベルです。thead 要素がない場合、すべての tr はテーブルの本体に属しているとみなされます。定義するテーブルの本体

7、HTML tfoot 属性

内に配置します。ラベル内のどの位置も、それぞれテーブルの先頭と末尾として決定されます。
は または の前または後に指定できます。
html5 では、
要素は 要素の後に配置する必要があります
。
8. HTML の Colgroup 属性

を使用して、特定の列にスタイルを適用することもできます

。
はローカル属性 spam を持ちます。
は、列グループがまたがる必要がある列の数を示します。デフォルトは 1 つの列です。つまり、テーブルの 1 つの列のスタイルを設定します 要素を 1 つ以上含めることができます
9。 を使用してテーブルの単一の列を表すのではなく、を使用してグループを定義することをお勧めします。ローカル属性span
を持ち、
のインスタンスはグループ内の列を表します。このタグを使用して、列のグループとグループ内の単一の列にスタイルを適用します
10. HTML キャプション属性

テーブルのタイトルを定義するために使用されます。各テーブルには 1 つの

要素のみを含めることができます

11。コード例:

<body>
    <table border="1" bordercolor="red" bgcolor="#ff4646">
        <caption>表格示例</caption>
        <tr align="center">
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
        <tr>
            <td align="left">左</td>
            <td align="center">中</td>
            <td align="right">右</td>
        </tr>
        <tr>
            <td valign="top">top</td>
            <td>center</td>
            <td valign="bottom">bottom</td>
        </tr>
    </table>
</body>

ログイン後にコピー

セルは複数の行にまたがります

<table border="1" bordercolor="#1f1fff">
       <caption>单元格的跨行</caption>
       <tr>
           <th>姓名</th>
           <th colspan="2">电话</th>
       </tr>
       <tr>
           <td>php中文网</td>
           <td>123456   654321</td>
       </tr>
   </table>

ログイン後にコピー

実行結果: HTML テーブルの属性とは何ですか? HTML テーブルの 10 個の基本属性の概要

列全体のセル

<table border="1">
     <caption>单元格跨列</caption>
     <tr>
         <th>姓名</th>
         <th>电话</th>
     </tr>
     <tr>
         <td rowspan="2">php中文网</td>
         <td>123456</td>
     </tr>
     <tr>
         
         <td>654231</td>
     </tr>
 </table>

ログイン後にコピー

実行結果: HTML テーブルの属性とは何ですか? HTML テーブルの 10 個の基本属性の概要