divと同じものをテーブルとして作成

私はCSSをより深く調べ始めました。主にテーブルから構成されたサイトのHTMLをdivに変換したいと決めました。divと同じものをテーブルとして作成

このテストページの表と同じように、divで同じことを達成しようとしています。 table vs div

コード：

を

列
垂直テキストの配置、私が得ているどこまで

を作ることができませんでした。しかし、私はいくつかの問題を抱えています

<style type="text/css"> 


body { 
background-color:#000; 
} 


/* TABLE CSS */ 
td { 
    font-family: Tahoma; 
    font-size: 12px; 

} 
.line { 
    border-collapse:separate; 
    border:1px solid #222222; 
    border-spacing:1px 1px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color: #000000; 
    padding: 1px; 
    width:400px; 

} 
.topic { 
    background-color:#3C0; 
    font-weight: bold; 
    height: 23px; 
    color:#FFF; 
    text-align:center; 
} 
.row { 
    background-color: #111111; 

    border-bottom: 1px solid black; 
    color: #ffffff; 
    height:12px; 
    line-height:21px; 
    padding:0px; 
} 
.row:Hover { 
    background-color: #252525; 
} 

/* DIV CSS */ 
div.line { 
    border-collapse:separate; 
    border:1px solid #222222; 
    border-spacing:1px 1px; 
    align:center; 
    background-color: #000000; 
    padding: 1px; 
    width:400px; 

} 
div.topic { 
    background-color:#3C0; 
    font-family: Tahoma; 
    font-size: 12px; 
    height: 23px; 
    font-color:#FFF; 
    text-align:center; 

} 
div.row { 
    background-color: #111111; 
    border-bottom: 1px solid black; 
    color: #ffffff; 
    padding:6px; 
    font-family: Tahoma; 
    font-size:12px; 

} 

div.row:Hover { 
    background-color: #252525; 
} 

</style> 
<body> 


<table class="line"> 
    <tbody> 
    <tr> 
     <td class="topic" colspan="3">Table</td> 
    </tr> 
    <tr class="row"> 
     <td width="20%" align="left">Test</td> 
     <td width="20%" align="center">1</td> 
    </tr> 
    <tr class="row"> 
     <td align="left">Test</td> 
     <td align="center">2</td> 
    </tr> 
    </tbody> 
</table> 
<p> 
<div class="line"> 
<div class="topic">Div</div> 
<div class="row">Test</div><div class="row">1</div> 
<div class="row">Test</div><div class="row">2</div> 
</div> 
</p>

出典

2011-10-28 domino

あなたは何を達成しようとしていますか？テーブルがより優れている可能性があります（例えば、表データの表現）。 –

@Truthよく、私はテーブルやdivだけを使うのではなく、両方を使うのが良いと聞きました。現時点で私のレイアウトはすべてのためにテーブルを使用しています。私はすべてをdivsとcssに変換しようとしています。 – domino

幅は固定されていますか？ –

あなたが行く：

HTML：

<div id="wrap"> 
    <h2> Div </h2> 
    <div class="section"> 
     <div> Test </div> 
     <div> 1 </div> 
    </div> 
    <div class="section"> 
     <div> Test </div> 
     <div> 2 </div> 
    </div> 
</div>

はCSS：

#wrap { 
    border: 2px solid #333; 
    padding: 2px; 
} 

h2 { 
    background: green; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    padding: 4px 0; 
} 

.section { 
    overflow: auto; 
    margin-top: 2px; 
} 

.section > div { 
    float:left; 
    width: 50%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    background-color: #333; 
    color: white; 
    padding: 4px 0; 
} 

.section > div + div { 
    text-align: center; 
    border-left: 2px solid black; 
}

ライブデモ：http://jsfiddle.net/jNQrM/1/

出典

2011-10-28 12:45:41

ありがとう、これはたくさん説明します。 section> div + div - これはCSSファイルでは見たことがありません。私はそれが何であるか教えてくれますか？私はそれを見ることができますか？ – domino

@domino 'X> Y'は[child combinator selector]（http://www.w3.org/TR/css3-selectors/#child-combinators）です。 'X + Y'は[隣接する兄弟コンビネータセレクタ]（http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators）です。セレクタ '.section> div + div'は、parentがクラス' section 'を持ち、前の兄弟もDIV要素であるすべてのDIV要素にマッチします。効果的に、私は最初のチャイルド、エゴ、第2のDIV、第3のDIVなどではない 'DIV 'セクション内の' .section'をすべて選択しています。（あなたの場合、それぞれの '.section'は2つのDIVしか含んでいないので、2つ目のDIVだけがマッチします。） –

float：left;このクラスに： div.row

出典

2011-10-28 12:26:19 GregM

は良い本を取得する - 私はCSSをお勧めします：ミッシングマニュアル（ミッシングマニュアル）
display ESP relative

float

出典

2011-10-28 12:27:34

CSSの表示プロパティを見てください。

.line { 
display: table; 
} 

.row { 
display: table-cell; 
}

ただし、Internet Explorerでいくつかの問題が発生するはずです。あなたはdisplay：inlineを使うことができます。ズーム：1;

出典

2011-10-28 12:31:14 dkg

tableをdivに変換していることがわかりましたが、必要な場合にのみこれを行うようにしてください。

ページのデータが表形式の場合は、table要素に入力することが理にかなっています。

Divはレイアウトと構造用です。tableは表形式のデータを表示するためのものです。

私の同僚は、過去にテーブル構造に従ったdivからフォーラムを構築しました。彼は "テーブルが悪い、divとCSSを使う"と言われたので、これはすべてだった。これはレイアウト構造のみを参照していることを覚えておくことが重要です。

構造に行と列がある場合は、表を使用します。表は依然として有効な有用なHTML要素であり、廃止されたものではありません。ここで

出典

2011-10-28 12:36:12 Curt

ありがとう、私はそれらが混在すべきではなく、ただ1つだけ使用すべきであるという印象を受けました。 – domino

@domino - いいえ、HTMLテーブルを使ってデータを表示するのは間違いなく、divを使うよりもはるかに良い方法です。アクセシビリティ面でも優れています。 – Curt

divと同じものをテーブルとして作成

答えて

関連する問題