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

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

このテストページの表と同じように、divで同じことを達成しようとしています。しかし、私はいくつかの問題があります:

  1. 列を作成できませんでした
  2. 縦方向のテキストの配置

How far I've gotten: table vs div

コード:

 
<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>
 

<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>

1
あなたは何を達成しようとしていますか?テーブルがより優れている可能性があります(例えば、表データの表現)。
追加された 著者 Madara Uchiha,
幅は固定されていますか?
追加された 著者 Šime Vidas,
@domino Fixedはピクセル単位の固定値を意味します。そのレイアウトの幅は固定されていますか?
追加された 著者 Šime Vidas,
@Truth私は、テーブルまたはdivのみを使用する方が良いと聞きました。両方は使用できません。現時点で私のレイアウトはすべてのためにテーブルを使用しています。私はすべてをdivsとcssに変換しようとしています。
追加された 著者 domino,
@ ime Vidasはい、50%
追加された 著者 domino,
はい、そうです。なぜ聞くのですか?
追加された 著者 domino,

5 答え

table div に変換していることを確認するのは良いことですが、必要な場合にのみこれを行うようにしてください。

ページ上のデータが表形式である場合、これを table 要素に入れることは意味があります。

Div's are for layout and structure, table's are for displaying tabular data.

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

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

5
追加された
@domino - いいえ、HTMLテーブルを使ってデータを表示することは間違いなく、divを使うよりもはるかに良い方法です。アクセシビリティ面でも優れています。
追加された 著者 Curt,
ありがとう、私はそれらが混在すべきではなく、ただ1つしか使用されてはならないという印象を受けました。
追加された 著者 domino,

どうぞ:

HTML:

<div id="wrap">
    

Div

<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;
}

Live demo: http://jsfiddle.net/jNQrM/1/

1
追加された
@domino X> Y 子コンビネータセレクタをご覧ください。 X + Y は、隣接する兄弟結合子ですセレクタを選択します。セレクタ .section> div + div は、親がクラス 'section' を持つすべてのDIV要素に一致し、前の兄弟要素もDIV要素です。効果的には、私は最初のチャイルド、エゴ、2番目のDIV、3番目のDIVなどではない .section 内のすべてのDIVを選択しています。 (あなたの場合、各 .section には2つのDIVしか含まれていないので、2つ目のDIVだけが一致します。)
追加された 著者 Šime Vidas,
ありがとう、これはたくさん説明します。 section> div + div - これはCSSファイルでは見たことがありません。私はそれが何であるか教えてくれますか?私はそれを見ることができますか?
追加された 著者 domino,

  1. 良い本を手に入れよう - CSS:不足しているマニュアル(不足しているマニュアル) 表示相対

    float
1
追加された

CSSの表示プロパティを見てみましょう。

.line {
display: table;
}

.row {
display: table-cell;
}

しかし、あなたはインターネットエクスプローラでいくつかの問題を起こすべきです。あなたはdisplay:inlineを使うことができます。ズーム:1;

0
追加された

フロートを置く:左;このクラスには:     div.row

0
追加された