htmlテーブルとは何ですか? タグでのさまざまな属性の使用方法

HTMLテーブルとは何ですか?

タグのさまざまな属性と使用法はすべてこの記事に記載されており、table タグを初めて使用する人がテーブルの役割をすべて明確に説明します。 HTMLテーブルテーブルにも属性といくつかの使い方があります

まず第一に、テーブルとは何か、テーブルの役割を理解しましょう

テーブルとは: テーブルと呼ばれるいくつかの長方形のボックスで構成されていますセルを左から右の順序で配置し、

テーブルを形成します。 特定の構造で情報を表示します。

テーブル table の使用方法:

テーブルの定義:

テーブル行の作成:

列 (セル) の作成:

注: デフォルトでは、各行の列数は均一です。

table : display:table;

html テーブル テーブルの機能:

1. 1 行のみ

2. 幅適応型 (コンテンツによって決定)

html テーブル テーブル属性:

1,

属性

1.width: テーブルの幅を設定します

2.height: テーブルの高さを設定します

3.align: 親要素のテーブルの水平方向の配置を設定します、 value ： left,center,right

4.border: ボーダー、ボーダーの幅、px単位の値、pxは省略可能

5.cellpadding

‐ ‐ ‐‐‐‐‐ と

6. cellpacing

セルの余白

セル間またはセルとテーブル間の距離

7.bgcolor: 背景色

2. テーブルの 属性

1.align: コンテンツの水平方向の配置この行の内容の垂直方向の配置

3.bgcolor

テーブル内の

3 テーブルの複雑な適用です

1。行のグループ化

テーブルは 3 つの部分に分割できます

1. テーブルヘッダー

2. テーブル本体

3. テーブルフッター

<table>
    <tbody>
         <tr></tr>
         <tr></tr>
    </tbody>
</table>

注: 間違っている場合 テーブルの行がグループ化されている場合、デフォルトではそれらはすべて tbody に属します

2 不規則なテーブルの各行の列の数。

は統一されていません。

1. 列全体で

列を結合し、指定したセルを右に水平に移動させ、複数のセルを結合します (自分自身を含む) 構文: td の Colspan 属性

2. 行全体で

行を結合しますセル、垂直下向き、複数のセル (それ自体を含む) をマージします 構文: td の rowspan 属性

注: 行または列にまたがる場合でも、マージされたセルはコードから削除する必要があります

3. テーブルのネスト

テーブルには、別のテーブルが埋め込まれています

ネストされたテーブルは

機能: タイトルの位置をデフォルトの位置からテーブルの下に変更します

属性: caption-side

Value :

1. 上: デフォルト

2. 下: タイトルは下の表にあります

4. HTML テーブルのテーブルスタイル属性の表示ルール

1.

関数ブラウザのレイアウト方法を指定しますテーブル。実際には、セルのアルゴリズム ルールを指定します

デフォルトのアルゴリズム: セルの幅は内容によって決まり、設定された幅の値によって制限されません。

2. 属性: table-layout

値:

1. auto: デフォルト値、自動、列幅はコンテンツによって決まります

2. 固定テーブルレイアウト、列幅は設定値によって決まります。

3. 自動テーブルレイアウト&固定テーブルレイアウト

1. 自動テーブルレイアウト(自動)

セルのサイズはコンテンツのサイズに適応します

テーブルが複雑な場合、読み込みが遅くなります

各列の不確実性 従来のテーブル表示方法を使用する場合は

を使用してください

2. 固定テーブルレイアウト (固定)

セルのサイズは設定値によって決まり、内容とは関係ありません

高速化されますテーブルの表示をアップすると、ブラウザは初めてテーブルをロードした後にテーブルを表示します。それが機能すると、もう計算する必要はありません。

4. 非表示の表示効果

属性: Visibility:collapse

テーブルのレイアウト全体に影響を与えることなく、行または列を削除するためにテーブル要素に使用されます

ご質問などがございましたら、この記事をお読みいただきありがとうございます。上記に関する質問は以下から行えます。

この上級バージョンについては別の記事もありますので、ぜひクリックしてください:

html5テーブルタグのスタイル紹介(html5テーブルCSSのセンタリング例付き)

【編集者の関連記事】

html emタグとは関数？ タグと タグの違い

html optgroup タグは何を意味しますか? HTML optgroupタグの使い方と属性例の分析

width height align valign bgcolor colspan: 列全体にセルを設定します rowspan:セルクロスバンク表とその他のマークを表に設定します: 1、 & lt; caption & gt; & lt;/caption & gt; <table> <caption>标题</caption> <tr> <td></td> <td></td> </tr> </table> 2. 行タイトルまたは列タイトル: 最初の行の各列、太字、水平方向の中央揃えの効果 行タイトル: 各行の最初の列、太字、水平方向中央揃え 効果は 行 (列) タイトル:

に表示される必要があります <table> <tr> <td> <table> <tr> <td> </td> </tr> </table> </td> </tr> </table> html テーブル テーブルの固有のスタイル属性 1 HTML テーブルのテーブル スタイル属性の境界線のマージ 属性: border-collapse 値: 1. Separate: デフォルト値、分離ボーダーモード 1.collapse: ボーダーマージモード 2 、HTMLテーブルテーブルスタイル属性ボーダーマージン 1.隣接するセルの境界線間の距離を設定します (cellspacing と同様) 属性: border-spacing 値: 1. 1つの値を取得します は、水平方向と垂直方向の間隔が等しいことを意味します 2. 2つの値を取得します 最初の値は水平方向の間隔を表します 2番目の値は垂直方向の間隔を表します スペースを含む 2 つの値 3. 要件 border-collapse border-collapse は次の条件で区切る必要があります。 border-collapse が分離ボーダーモードである必要がある場合は、border-collapse が有効である必要があります。ボーダーモード 3. HTMLテーブルのタイトル位置 テーブルスタイル属性

以上がhtmlテーブルとは何ですか? タグでのさまざまな属性の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。