Question

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?

Answer 1

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/