Как добиться макета таблицы без использования таблиц?

Во имя прогресса (и обучения), как я могу убрать таблицы из моего кода и достичь того же макета?

Например, вот моя таблица:

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

 bigtoothmedia15 июн. 2012 г., 12:59
Извините, да, именно так оно и есть на сайте (следовательно, CSS "& quot; .footertext & quot; а не & quot; # footertext" ... моя ошибка при вводе текста здесь ... спасибо!
 Jared Farrish15 июн. 2012 г., 12:54
Сclass="footertext": jsfiddle.net/userdude/tYjKw/1
 Jared Farrish15 июн. 2012 г., 12:53
Не используйте повторноid теги, как вы. Это должно бытьclass="footertext".

Ответы на вопрос(3)

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

.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/), которые вам очень помогут.

 bigtoothmedia15 июн. 2012 г., 13:29
Круто, я посмотрю - таблицы для меня теперь история, благодаря некоторым ответам на этот вопрос! Посмотрите на мой источник для нижнего колонтитула наpoltairhomes.com (извините за беспорядок, созданный заказами wordpress! client!) - как бы я избавился от & lt; br & gt;?
 bigtoothmedia15 июн. 2012 г., 14:08
Нет, я не пытался сделать верный макет! Я имел в виду чрезмерную сложность тегов html - WordPress собирает html из CSS и PHP - но нет, моя вина была моей ошибкой! Что вы подразумеваете под "расставанием"? Выглядит хорошо для меня?
 bigtoothmedia15 июн. 2012 г., 13:16
Посмотрел 960grid slides - выглядит очень интересно ... непременно буду исследовать дальше. Спасибо!
 15 июн. 2012 г., 13:27
Лично я использую 1140px для более широких экранов, и до сих пор это меня не подводило, это гибко, и с помощью @ media-запросов вы можете просто адаптировать его. Личный совет: получить. избавиться. из. . столы. а также. . . & Л; бр & GT ;. : D
 15 июн. 2012 г., 13:33
& lt; br & gt; & s; s созданы Wordpress? Кстати, я предлагаю добавить .textwidget & gt; .footerItem: last-child {padding: 0;}, так как ваш нижний колонтитул как бы распадается.
Решение Вопроса

.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 для разделения блоков и применения класса к каждому:

 bigtoothmedia15 июн. 2012 г., 13:32
Это ответ, на который я пошел - но здесь есть и другие, которые действительно полезны ... спасибо всем! Отличная работа :)
 bigtoothmedia15 июн. 2012 г., 12:55
Спасибо - один из двух отличных примеров! :)

.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>
 15 июн. 2012 г., 13:20
Что касается вопроса о том, чтобы получить таблицу без использования тега & lt; table & gt;, это было бы лучшим и современным решением. И вы также можете использовать & quot; вертикальное выравнивание: середина & quot; к которому не так просто подойти только с сеткой, но это показано в скриптовой ссылке. Обратите внимание, что это не работает на IE7 и ниже.

Ваш ответ на вопрос