如何使表6列/兩個不同的表，而不是3列

Question

在一個網站上我的工作作爲一個項目，我有一個table具有3 columns，

Column 1: Artist 
Column 2: Times Played this week 
Column 3: Previous Plays 

然後用這個問題是table很長，需要一段時間才能滾動到底部（好，比用戶要多的時間）。

我想這是在此佈局，並有6 columns，或兩個不同的tables：

Column 1: Artist 
Column 2: Times Played this week 
Column 3: Previous Plays 
(little space to break the 3 columns each side up) 
Column 4: Artist 
Column 5: Times Played this week 
Column 6: Previous Plays 

的鏈接到頁面與當前table低於：

LINK

的PHP使用top的代碼im生成table，其內容是：

<?php 
$xml_data = file_get_contents('http://www.bbc.co.uk/programmes/music/artists/charts.xml'); 
$xml = new SimpleXMLElement($xml_data); 
?> 

<table> 
<th>Artist</th> 
<th>Times played this week</th> 
<th>Previous plays</th> 

<?php 
foreach ($xml->artists->children() as $child) 
{ 
    echo "<tr>"; 
    $artist = (string)$child->name; 
    echo "<td>$artist</td>"; 
    $playedweek = (string)$child->plays; 
    echo "<td>$playedweek</td>"; 
    $previousplays = (string)$child->previous_plays; 
    echo "<td>$previousplays</td>"; 
    echo "</tr>"; 
}?> 
</table> 

我使用的table的CSS是：

table { 
text-align: center; 
} 
td { 
    border-right: 1px solid #C1DAD7; 
    border-bottom: 1px solid #C1DAD7; 
    background: #fff; 
    padding: 6px 6px 6px 12px; 
    color: #6D929B; 
} 

我已經嘗試了包括所有必要的代碼，您可能需要。如果我缺少生病請按照要求添加它。

我該如何實現我上面描述的？

Answer 1

如果你有一個選項，與當時的任何其他元素替換表：

渲染信息的列表，然後給li元素以左爲值和寬度爲16.6％浮動

如：

<?php 
$xml_data = file_get_contents('http://www.bbc.co.uk/programmes/music/artists/charts.xml'); 
$xml = new SimpleXMLElement($xml_data); 
?> 

<ul> 
<li>Artist</li> 
<li>Times played this week</li> 
<li>Previous plays</li> 
<li>Artist</li> 
<li>Times played this week</li> 
<li>Previous plays</li> 
<?php 
foreach ($xml->artists->children() as $child) 
{ 
    $artist = (string)$child->name; 
    echo "<li>$artist</li>"; 
    $playedweek = (string)$child->plays; 
    echo "<li>$playedweek</li>"; 
    $previousplays = (string)$child->previous_plays; 
    echo "<li>$previousplays</li>"; 
}?> 
</ul> 

CSS：

li 
{ 
    float: left; 
    width: 16.6%; 
} 

HTML樣本：http://jsfiddle.net/yT6P5/

Answer 2

兩張桌子！找到表格的長度（比如221），除以二和四捨五入（111 ...取決於你使用的舍入方法），並在該編號處插入一些html來結束第一個表格並開始第二個表格：

if (@counter == 111) { 
echo "</table>"; 
echo "<table>"; 
echo " <tr>"; 
echo " <th>Artist</th>"; 
echo " <th>Times played this week</th>"; 
echo " <th>Previous plays</th>"; 
echo " </tr>"; 
} 

修改你的CSS一點點地得到表除了彼此的所需間距：

table { 
    text-align:center; 
    float:left; 
    margin-right:2em; 
} 

而且你應該設置。