PHP Forum

**microsoftx** · 04-23-2009, 05:29 PM

is it possible to replace the tables i have now with div's ?

for ex: i have 5 column going across, and downwards, but instead of using tables, i would like to use DIV'S. can somone please how me how it can be done? thanks!

heres the page
http://www.dangmn.net/hp/standings.php

Quote:

echo "<table ALIGN='center' border='0' cellpadding='5' width='100%'>
<tr>

<th bgcolor='#0096FF'><FONT COLOR='#000000'>Rank</th>
<th bgcolor='#0096FF'><FONT COLOR='#000000'>Points</th>
<th bgcolor='#0096FF'><FONT COLOR='#000000'>Player</th>
<th bgcolor='#00CCFF'><FONT COLOR='#000000'>Wins</th>
<th bgcolor='#00CCFF'><FONT COLOR='#000000'>Loses</th>
</tr>";

while($row = mysql_fetch_array($result))
{

echo "<tr>";
echo "<td ALIGN='CENTER' background='images/minix2.jpg'><FONT COLOR='#000000'>" . $row['code1'] . "</td>";
echo "<td ALIGN='CENTER' background='images/minix2.jpg'><FONT COLOR='#000000'>" . $row['rating1'] . "</td>";
echo "<td ALIGN='CENTER' background='images/minix2.jpg'><FONT COLOR='#000000'>" . $row['setname'] . "</td>";
echo "<td ALIGN='CENTER' background='images/minix2.jpg'><FONT COLOR='#000000'>" . $row['wins'] . "</td>";
echo "<td ALIGN='CENTER' background='images/minix2.jpg'><FONT COLOR='#000000'>" . $row['loses'] . "</td>";
echo "</tr>";
}

echo "</table>";

**rogem002** · 05:34 PM

It is, but a list is better:

PHP Code:


			
echo '
<ul class="table_title">
<li>Rank</li>
<li>Points</li>
<li>Player</li>
<li>Wins</li>
<li>Loses</li>
</ul>';


while($row = mysql_fetch_array($result))
{

echo '<ul class="table_body">';
echo '<li>' . $row['code1'] . '</li>';
echo '<li>' . $row['rating1'] . '</li>';
echo '<li>' . $row['setname'] . '</li>';
echo '<li>' . $row['wins'] . '</li>';
echo '<li>' . $row['loses'] . '</li>';
echo '</ul>';
}

Then just add some CSS styling to the lists, and your done.

**JeremyMiller** · 04-24-2009, 06:26 PM

Nice idea Mike.

John, just a question, but why would you want to take a table of data out of it's table structure?

**microsoftx** · 04-24-2009, 06:46 PM

i wanted to add nice thin black borders, i cant add thin nice look borders

**JeremyMiller** · 04-24-2009, 07:35 PM

You should be able to with something like this:

HTML Code:

<html>
<head>
  <style>
    #my_table th.top, #my_table td.top {
      border-top:1px #000000 solid;
    }
    #my_table th.left, #my_table td.left {
      border-left:1px #000000 solid;
    }
    #my_table th, #my_table td {
      border-right:1px #000000 solid;
      border-bottom:1px #000000 solid;
    }
  </style>
</head>
<body>
<table id="my_table" border="0" cellspacing="0" cellpadding="5">
  <tr><th class="top left">Head 1</th><th class="top">Head 2</th></tr>
  <tr><td class="left">Data 1</td><td>Data 2</td></tr>
  <tr><td class="left">Data 3</td><td>Data 4</td></tr>
</table>
</body>
</html>

right? Or am I missing something?

**VirtuosiMedia** · 12:51 AM

Jeremy is right; generally you'll want to use divs in places of tables for layout purposes, but if you're actually displaying a table of information, a table is the best choice, for practical and semantic purposes. For correct use of <th>, you should wrap it in <thead> rather than <tr>. Also, you might find a <tfoot> useful as well (and it might seem silly, but if you use it, it needs to directly follow the <thead> before any other rows are added). For your CSS, you're looking for the border-collapse:collapse; property, which should be applied to the table. See my code example below:

HTML Code:

<style type="text/css">
    table {border-collapse:collapse;}
    table td, table th {border:1px #000 solid; padding:5px;}
</style>
<table cellpadding="0px" cellspacing="0px">
    <thead>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>                        
    </thead>
    <tfoot>
        <td colspan="4">Footer</td>
    </tfoot>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>                        
    </tr>
    <tr>
        <td>F</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>                        
    </tr>    
</table>

**microsoftx** · 04-25-2009, 06:26 AM

wow! that is excatly how i want it! i didnt know it was possible with tables, i am having a little bit of trouble trying to get the other column's to go in

http://www.dangmn.net/hp/test.php

can you show me how to make head 4,5,6 column go down vertically as well? and thank u so much!

**microsoftx** · 04-25-2009, 06:34 AM

okay nvm thanks guys i got it!

**JeremyMiller** · 04-25-2009, 02:11 PM

Before using the thead, tfoot, and tbody suggestions above, I recommend reading http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 as it suggests a slightly different usage. It is better, however, to use those constructs (just something I haven't gotten around to yet).

**VirtuosiMedia** · 03:28 PM

Quote:

Originally Posted by JeremyMiller

Before using the thead, tfoot, and tbody suggestions above, I recommend reading http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 as it suggests a slightly different usage. It is better, however, to use those constructs (just something I haven't gotten around to yet).

Oops, good catch, you're right. That's what I get for going from memory without looking it up. You'll want to use the thead, then a tr, then the th elements, like so:

Code:

<table>
    <caption>This is optional, but it can only be placed directly after the opening table tag</caption>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>                                    
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>        
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>        
        </tr>        
    </tbody>
</table>

**microsoftx** · 04-26-2009, 10:02 PM

ran into a little issue

i logged on today and all my borders were gone??!?!

Here is the css code:

Code:

table {
border-collapse:collapse;
}

table td, table th {
border:1px #000 solid; padding:5px;
}

PHP Code:


			
<?php

//connect
include 'connect.php';

$result = mysql_query("SELECT * FROM members WHERE ban = 0 ORDER BY rating1 DESC LIMIT 5");

echo "<table cellspacing=\"0\" >";
echo "<thead>
<td colspan='4' background='images/minix2.jpg' alt='minix2' width='185px'>1v1 Standings</td>
</thead>";
$i = 1;
   while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td algin='center' background='images/bottomx.jpg' alt='minix'><font color='#000000'>" .$i. "</td>";
  echo "<td algin='center' background='images/bottomx.jpg' alt='minix'>   " . "  ".$row['code1']. "</td>";
  echo "<td><font size='2' background='images/bottomx.jpg' alt='minix'><a href =\"results.php?setname=" . $row['setname'] . "\" class ='styleone'>   " . "  " .$row['setnamecolor']. "</a></td>";
  echo "<td background='images/bottomx.jpg' alt='minix'><font color='#000000'>" . $row['rating1']. "</td>";
  echo "</tr>";
  $i++;
    }

echo "</table>";
?>