テーブルを使わずにテーブルレイアウトを達成する方法は？

進行状況（および学習）の名前で、コードからテーブルを削除して同じレイアウトを達成するにはどうすればよいですか？テーブルを使わずにテーブルレイアウトを達成する方法は？

たとえば、ここに私のテーブルです：

<table cellspacing="0px"> 
    <tr> 
     <td> 
      <img src="http://www.poltairhomes.com/images/footerlogo.png" /> 
     </td> 
     <td id="footertext"> 
      <p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />[email protected]</p> 
     </td> 
     <td id="footertext"> 
      <p>Terms and Conditions | Privacy Policy | Sitemap</p> 
     </td> 
     <td id="footertext"> 
      <p>SIGN UP FOR OUR NEWSLETTER:</p> 
      <img src="http://www.poltairhomes.com/images/signup(temp).png" /> 
     </td> 
    </tr> 
</table>

し、関連するCSS：

.footertext { 
    margin: 0; 
    padding:0 5px 0 5px; 
    color: #AAA; 
    font-size: 10px; 
    font-family:Arial, Helvetica, sans-serif; 
    text-align:center; 
    border-left: 1px solid #CCC; 
}

http://jsfiddle.net/userdude/tYjKw/

出典

2012-06-15 bigtoothmedia

あなたのように 'id'タグを再利用しないでください。それらは 'class =" footertext "'でなければなりません。 –

'class =" footertext "'：http://jsfiddle.net/userdude/tYjKw/1/ –

これはサイト上に実際どのように存在するのかです（したがってCSSは ".footertext"であり、 "＃フットノート "... ...ここに入力すると悪いです...ありがとう！ – bigtoothmedia

としてのスタイルを作成します。

.footerItem { float: left; }

<div class="footerItem"> 
 
     <img src="http://www.poltairhomes.com/images/footerlogo.png" /> 
 
    </div> 
 
    <div class="footerItem"> 
 
     <p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />[email protected]</p> 
 
    </div> 
 
    <div class="footerItem"> 
 
     <p>Terms and Conditions | Privacy Policy | Sitemap</p> 
 
    </div> 
 
    <div class="footerItem"> 
 
     <p>SIGN UP FOR OUR NEWSLETTER:</p><img src="http://www.poltairhomes.com/images/signup(temp).png" /> 
 
    </div>

して、ブロックを分離し、それぞれにクラスを適用するにはdiv要素を使って、あなたの体を作成します。

出典

2012-06-15 10:49:32 Dave

ありがとうございます - ） – bigtoothmedia

これは私が行った答えですが、ここには他にも本当に役立つものがあります。ありがとう！素晴らしい仕事:) – bigtoothmedia

CSS：

.table { 
    display: table; 
} 
.table-row { 
    display: table-row; 
} 
.table-cell { 
    display: table-cell; 
}

HTML：

<div class="table"> 
    <div class="table-row"> 
    <div class="table-cell">Table cell 1</div> 
    <div class="table-cell">Table cell 2</div> 
    </div> 
</div>

出典

2012-06-15 10:45:07

タグを使用せずにテーブルを取得する質問について、これは最高で現代的な解決策であり、グリッドだけでアプローチするのは簡単ではありませんが、フィドルリンクに表示されます。ここではIE7以下では動作しません。 – insertusernamehere

<div class="table"> 
    <div class="row"> 
     <div class="cell twocol"> 
      <span>Content1</span> 
     </div> 
     <div class="cell twocol"> 
      <span>Content2</span> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="cell onecol"> 
      <span>Content3</span> 
     </div> 
    </div> 
</div>

およびCSS

.table {width: 100%; height: 100%;} 
.row {width: 100%; min-height: 1px; height: auto; margin: 0;} 
.cell {float: left; margin: 0; padding: 0;} 
.onecol {width: 100%;} 
.twocol {width: 50%;}

960grid（http://960.gs/）や1140grid（http://cssgrid.net/）のようないくつかのグリッドシステムを調べることをお勧めします。

出典

2012-06-15 10:56:59 zbrukas

960gridスライドをチェックアウトしました。ありがとう！ – bigtoothmedia

個人的には、より広い画面で1140pxを使用していますが、これまでのところ私は失敗していません。柔軟性があり、@ media-queriesを使用すると簡単にそれを適応させることができます。個人的なアドバイス：get。除去する。の。。テーブル。そして。。。
。：D – zbrukas

クール私は一見を持っています - この質問のいくつかの答えのおかげで、テーブルは私のための歴史です！ http://www.poltairhomes.comのフッタのソースを見てください（ワードプレスによって作成された混乱を実感してください！クライアントの注文！） - どうすれば
を取り除くことができますか？ – bigtoothmedia

テーブルを使わずにテーブルレイアウトを達成する方法は？

答えて

関連する問題