如何使表6列/两个独立的表，而不是3列 - How to make table 6 columns/two seperate tables instead of 3 columns

How to make table 6 columns/two seperate tables instead of 3 columns

本文关键字：3列独立两个 6列何使表 | 更新日期: 2023-09-27

在我正在做的一个网站上，我有一个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的页面链接如下:

链接

PHP代码使用top生成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;
}

我已经试着包括你可能需要的所有必要的代码。如果我遗漏了什么，我会根据要求补充。

我怎样才能实现我上面描述的?

如果你可以选择用其他元素替换table，那么:

将info呈现为一个列表，然后给li元素一个float值为left，宽度为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/

两个表!算出你的桌子的长度(比如221)，除以2，然后四舍五入，(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;
}