ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML テーブルの属性についてどれくらい知っていますか?

HTML テーブルの属性についてどれくらい知っていますか?

寻∝梦
リリース: 2018-08-14 16:22:53
オリジナル
4109 人が閲覧しました

HTML テーブルの属性についてどれくらい知っていますか?テーブル タグは HTML で広く使用されており、初心者でも簡単に始めることができますが、テーブルの機能を大幅に向上させることができる属性もいくつかあります。適切に適用すると、ページが鮮明で美しいことがわかります。 HTML の table 属性について学びましょう。

テーブルとは何か、テーブルの役割

テーブルとは: セルと呼ばれるいくつかの長方形のボックスが左から右、上から下の順に並べられて構成されています

テーブルの役割: 表示特定の構造内の情報。

テーブルの使い方

テーブルを定義:

テーブル行を作成:

列(セル)を作成: ;/td>

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

table テーブルの機能:

1. 排他的な行

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

table テーブル属性:

width: テーブル幅の設定
  • height: テーブルの高さを設定します
  • align: 親要素内のテーブルの水平方向の配置を設定します。値: left、center、right
  • border: 境界線、境界線の幅、単位はピクセルです、pxは省略可能
  • cellpadding: セルの内側の余白
  • セルとセルの間、またはセルとテーブルの間の距離
  • bgcolor:
  • 1.align: valign: 行の内容の垂直方向の配置、値: 上、中、下
  • 3.bgcolor 行のテキストの色

attribute
  • width
  • ライト
  • align

valign

  • bgcolor

  • colspanはセルを複数の列にまたがるように設定します

  • rowspanはセルを複数の列にまたがるように設定しますrows

  • 3. その他表のタグ

  • 1.< ;caption>
  • 機能: 表のタイトルを定義します

  • 位置: 表の真上の中央に表示されます
  •                               <table>
                     <caption>标题</caption>
                     <tr>
                        <td></td>
                         <td></td>
                     </tr>
                   </table>
    ログイン後にコピー

    2. 行タイトルまたは列タイトル

  • 列タイトル: 最初の行の各列、太字、水平方向のセンタリング効果が表示されます
  • 行タイトル: 各行の最初の列、太字、水平方向のセンタリング効果が表示されます

  • 行(列) タイトル:

    関数は

    table border merge:

    Attribute: border-collapse

    Value :

    1.個別のデフォルト値、個別の境界線モード

    2.境界線の結合モードを折りたたむ

    テーブル境界線のマージン:

    1. 機能: 隣接するセルの境界線間の距離を設定します(セル間隔と同様)2。属性: border-spacing

    値: : 1. 1 つの値を取る: 水平方向と垂直方向の間隔が等しいことを表します

    2. 2 つの値を取る: 最初の値の水平方向の間隔

    2 番目の値の垂直方向の間隔は 2 つの値を示します2 つの値をスペースで区切ります

    3. 要件

    境界線の折りたたみは分離する必要があります 境界線分離モードで有効である必要があります

    非表示の表示効果:

    属性: Visibility:collap: se

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

    [関連推奨事項]

    HTML をゼロから学習できる HTML の基本要素

    HTMLファイル? HTML ファイルについての予備的な理解

    以上がHTML テーブルの属性についてどれくらい知っていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート