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

On a website I am working on as a project I have a table which has 3 columns,

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

Then problem with this is that the table is very long and it takes a little while to scroll to the bottom (well, more time than the user will give).

I want it to be in this layout and have 6 columns, or two seperate 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

The link to page with the current table is below:

LINK

The PHP code im using top generate the table and its contents is:

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

The CSS I am using for the table is:

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

I have tried to include all the necessary code that you may need. If im missing something ill add it upon request.

How can I achieve what I described above?

If you have an option to replace table with any other element then:

Render the info as a list and then give the li elements a float with left as the value and the width as 16.6%

e.g:

<?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%;
}

Sample HTML @: http://jsfiddle.net/yT6P5/

Two tables! Find the length of your table (say 221), divide by two and round, (111... depending on which rounding method you use), and at that number insert some html to end the first table and start a second one:

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>";
}

Modify your CSS a little to get the table besides each other with the desired spacing:

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

And you should be set.