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