htmlレイアウトのテーブルレイアウト

3760 ワード
html css レイアウト
もっと読む
htmlレイアウトのテーブルレイアウト
1.1テーブルレイアウト
1、レイアウト方式
        レイアウト方式一:テーブル要素と関連要素を使ってレイアウトを行う.
        レイアウト方式2:テーブルに関するdisplay属性値を用いてテーブルをレイアウトする.
2、二種類のレイアウトの違い
        テーブル要素はHTMLで意味を含むラベルであり、データを記述するために用いられる.表に関するdisplay属性値を使用すると、意味を含まずにブラウザ内の一部の要素のスタイルを宣言するだけです.
注意:データを表で示す必要がある場合は、表に関するdisplay属性値で定義されるテーブルを使用しないでください.
3、匿名のテーブル要素——CSSテーブルレイアウトの特性:欠けているテーブル要素はブラウザで匿名で作成されます.
        CSS 2.1仕様:CSS 2.1テーブルモデルの要素は、すべてHTML以外の文書言語に含まれていないかもしれません.このとき、それらの「失われた」要素は、表のモデルが正常に動作するようにシミュレートされます.すべてのテーブル要素は自動的に自分の周りに必要なテーブルオブジェクトを生成して、テーブルテーブル/inline-table、テーブル-row、テーブル-cellの3つのネスティング関係に適合させます.
        ある元素のために「display:table-cell」属性を使うと、その親の容器を「display:table-row」属性に設定しないと、ブラウザはデフォルトで表行を作成します.文書の中に本当に声明された表行があるようです.
1.2テーブルに関するdisplay属性値
1、概要
        テーブルに関するdisplay属性値は、テーブル要素のように設定された要素をレンダリングします.
2、詳しく紹介します
        display:テーブルこの要素をテーブルスタイルでレンダリングします.
        display:table-row;この要素をtrスタイルでレンダリングします.
        display:table-cell;要素をtdスタイルでレンダリングします.
        display:table-row-group;この要素をtbodyスタイルでレンダリングします.
        display:table-header-group;この要素をtheadスタイルでレンダリングします.
        display:table-footer-group;この要素をtfootスタイルでレンダリングします.
        display:table-caption;この要素をcaptionスタイルでレンダリングします.
        display:table-column;この要素をcolスタイルでレンダリングします.
        display:table-column-group;この要素をcolgroupスタイルでレンダリングします.
1.3実例詳細解:三段目の格子配置
1、テーブルと関連要素の配置を使う
例:

    

        CELL A
        CELL B
        CELL C
    



 


    

        CELL A
        CELL B
        CELL C
    


 
 
 
 
.table-one,.table-two{
    border-spacing: 0;
}
.table-one td,.table-two th{
    width: 100px;
    height: 36px;
    border: 1px solid blue;
    text-align: center;
}
2、 に するdisplay   レイアウトを  する
 :
.container { 
    display: table; 
} 
.row { 
    display: table-row; 
} 
.cell { 
    display: table-cell; 
    width: 100px; 
    height: 36px; 
    border: 1px solid blue; 
    line-height:36px;
    text-align:center;
} 
 
    
 
        
CELL A
 
        
CELL B
 
        
CELL C
 
    
 

 
          のHTML  では、  したすべてのCSSクラス に して、 と の を む3つのセルを  に  しています.しかし、これらのタブを らすことができます. のdiv  を  してみてください.
 
    
CELL A
 
    
CELL B
 
    
CELL C
 

 
         のコードがステートメントテーブルの から れていても、ブラウザは  のテーブル を  します.もっと くのコードを  できます.
CELL A
 

CELL B
 

CELL C
          のコードは   と の のコードを けています.ブラウザは  にこれらの  の オブジェクトを  します.これらのラベル  が りなくても、   な  は じです.
3、まとめ
          の   を  するルール:
        これらの  の の  は わったものではなく、   にHTMLソースに しいラベルを  しません.
            がレイアウトに び された  、ブラウザは  に じて  の オブジェクトを  し、CSS display  をテーブル、テーブルrow、またはテーブルセルのいずれかに  します.ある  がすでに「display:table-cell」に  されていて、その ノード(その  を む)が「display:table-row」に  されていない  、ブラウザは「display:table-row」に  された  の のオブジェクトを  してセットします.また、  する  が「display:table-cell」である  ノードも、この  の のオブジェクトに められ、「display:table-cell」に  されていない  に  うまでは、この を  します.
ダイナミックリンクライブラリをgdbでデバッグする
https暗号化要求の詳細解を実現するために、nginx設定ssl証明書