使用div而不是表格进行布局

Question

我想知道将表格布局替换为div的方法最好.我自己一直在尝试一些,但它非常混乱了我的4x4 div.我猜这是不是很难实现有经验做这些事情,但我都是新来的divs并试图学习这个:)

看看这个,并分享你的意见,如果表应保持不变或如果它应替换为div:http://jsfiddle.net/CZdux/

<table align="center" border="0">
  <tr>
    <td width="430" rowspan="3">    
        <div class="container">
            <div id="a1" class="card"></div>
            <div id="a2" class="card"></div>
            <div id="a3" class="card"></div>
            <div id="a4" class="card"></div>
            <div id="a5" class="card"></div>
            <div id="a6" class="card"></div>
            <div id="a7" class="card"></div>
            <div id="a8" class="card"></div>
            <div id="a9" class="card"></div>
            <div id="a10" class="card"></div>
            <div id="a11" class="card"></div>
            <div id="a12" class="card"></div>
            <div id="a13" class="card"></div>
            <div id="a14" class="card"></div>
            <div id="a15" class="card"></div>
            <div id="a16" class="card"></div>
        </div>   
    </td>
    <td width="161" height="95" align="center" valign="middle">LOGO</td>
  </tr>
  <tr>

Answer 1

将表格布局替换为divs最好的方法是什么？

将所有内容重新格式化为具有display属性的表.;)

HTML

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

CSS

.table-div{display:table}
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}

jsFiddle在这里