1. 將依比例設定的 div 區塊置中

margin-left: auto;
margin-right: auto;

2. 在設置完區塊 float 之後，後面的排版亂掉
在 css 裡加入以下兩行，然後在 html 文件在設置完 float 的區塊後加上 <p class="clear"></p>

.clear {zoom:1; clear:both;}
.clear:after {content:''; display:block; clear:both; visibility:hidden; height:0;}

3. 區塊並排，並非一定要用 float，可設 display: inline-block 來完成。

4. <table> 改用 <div>
for example
html:

<div id="data_grid">
<div id="subtitle">
<span class="st_date">日期</span>
<span class="st_subject">標題</span>
<span class="st_poster">發文者</span>
<span class="st_number">篇數</span>
<span class="st_view">查閱數</span>
</div>
<div class="article_list">
<span class="st_date">2010-09-05</span>
<span class="st_subject">Fedora 13 筆記 (Virtual Box)</span>
<span class="st_poster">一劃</span>
<span class="st_number">3</span>
<span class="st_view">266</span>
</div>
</div>

css:

data_grid {

font-weight: normal;
display: table;
font-size: 14px;
margin: 0px;
padding: 0px;
width: 100%;
border-left: solid 1px #BB8800;
border-top: solid 1px #BB8800;
}

subtitle {

display: table-row;
background-color: #BB8800;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}

.article_list {
display: table-row;
background-color: #ffffff;
color: #000000;
margin: 0px;
padding: 0px;
}

.st_date {
display: table-cell;
border-right: solid 1px #BB8800;
border-bottom: solid 1px #BB8800;
margin: 0px;
padding: 3px;
width: 15%;
}
.st_subject {
display: table-cell;
border-right: solid 1px #BB8800;
border-bottom: solid 1px #BB8800;
margin: 0px;
padding: 3px;
width: 50%;
}
.st_poster {
display: table-cell;
border-right: solid 1px #BB8800;
border-bottom: solid 1px #BB8800;
margin: 0px;
padding: 3px;
width: 15%;
}
.st_number {
display: table-cell;
border-right: solid 1px #BB8800;
border-bottom: solid 1px #BB8800;
margin: 0px;
padding: 3px;
width: 10%;
}
.st_view {
display: table-cell;
border-right: solid 1px #BB8800;
border-bottom: solid 1px #BB8800;
margin: 0px;
padding: 3px;
width: 20%;
}

以後有新的再往下加下去