2 Replies - 882 Views - Last Post: 20 July 2012 - 07:44 PM

#1 dubleeble  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 20-July 12

Switching From Tables To Div Tags

Posted 20 July 2012 - 12:02 PM

My question is how to convert a website that is currently using tables throughout the site for organization , styling etc. into a website using div tags and CSS to organize and style.

When I search For how to do this I usually find how to do it with many different div tags I wanted to work with one div tag.

I just want if there is an easier way.

Website where code is located Dubleeble.com
The CSS
#ctent{
line-height:110%;
border-radius: 5px;
 margin-top : 12px;
 border-style: 2px solid;
 -moz-box-shadow: inset 4px 4px 5px #111, inset -2px -2px 5px #111;
 -webkit-box-shadow: inset 4px 4px 5px #111, inset -2px -2px 5px #111;
 box-shadow: inset 4px 4px 5px #111, inset -2px -2px 5px #111;
 border-color: #333333;
 background-color: #202020;
 }

The Table
$con = mysql_connect("host","username","password");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("dubleeble", $con);

$result = mysql_query("SELECT * FROM news ORDER BY id DESC LIMIT 4");

while($row = mysql_fetch_array($result))
  {
  $position=163; 
    
$message=$row['description'] ; 
$desk = substr($message, 0, $position); 
$snumr = sprintf('%02d', $row['series_num']);

	echo "<center><table id='ctent' width='500px' height='97' border='0' cellpadding='9' cellspacing='0' ><tr><td><table border='0' cellpadding='3' cellspacing='0' >
  <tr>
    <td colspan='2'><center><b><font size=4 color=#178bff>" . $row['title'] . "</font></b></center></td>
  </tr>
  <tr>
    <td  width='' rowspan='1'><img src='" . $row['image'] . "' width='120' height='120' alt='" . $row['image_alt'] . "' align='top'><div class='nummer'>" . $snumr . "</div></td>
    <td width=''><b>Description</b><br><font size='3' color=#a0a0a0 > " . $desk . "...</font><font color=#a0a0a0 ><br><font size='2' color=#3D81EE><b>Series</b> <i>" . $row['series'] . "</i><br><b>Category</b> <i>" . $row['category'] . "</i></font>
	<center>

	</td>
	 <tr><td colspan='2' rowspan='1' ><center>
	 
	 	<a href='watch.php?" . $row['id'] . "' target='_blank' class='classname'>More Info</a>
	<a href='http://www.youtube.com/watch?v=" . $row['link'] . "?rel=0' target='_blank' rel='prettyPhoto'  class='classname'>Watch Now</a>
  </td></tr>
</table></td></tr></table></center>
";
  }

mysql_close($con);
?>


Is This A Good Question/Topic? 0
  • +

Replies To: Switching From Tables To Div Tags

#2 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 461
  • View blog
  • Posts: 3,158
  • Joined: 12-January 10

Re: Switching From Tables To Div Tags

Posted 20 July 2012 - 12:13 PM

No just take your time --create a nice css and add the sytle and div tags
Was This Post Helpful? 0
  • +
  • -

#3 Lazy Vulpes  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 60
  • Joined: 02-May 12

Re: Switching From Tables To Div Tags

Posted 20 July 2012 - 07:44 PM

No, there is no easy way, per say. How easy and simple it is to do, is relative to your own particular skill set.

From a quick view on the homepage, I'd say you would need a minimum of 8 divs. One to contain the site and seven for each of the boxes in it. Depending on how dynamic you want the sizes and so on to be, you might need more divs.

This is how I would tackle the problem: First I would remove all styling and tables. Then I would create a div around every section of the php output that needs to be separate from each other. Then if some of those divs needs to belong together in a over arching group, I would create a div around them.

+------------------------Animals------------------------+
| +------Cow------+ +------Pig------+ +----Chicken----+ |
| |      Milk     | |     Bacon     | |      Egg      | |
| |     Grass     | |     Grain     | |     Chalk     | |
| +---------------+ +---------------+ +---------------+ |
+-------------------------------------------------------+



Things which you'll need in your css, judging from the site is probably things like; Display:inline-block/floats and margin/padding.

So, take your time, and try to learn as much as possible in the progress.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1