Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help

  Killersites.com Forum
  Category: General Web Design
  Forum: CSS - Styling your pages with Cascading Style Sheets.
  Thread: Going From Tables to CSS

Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 6
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 873 times and has 5 replies Next Thread
Male cboudy
Advanced Member
Member's Avatar


Joined: May 26, 2006
Post Count: 1757
Status: Offline
Reply to this Post  Reply with Quote 
Going From Tables to CSS
Hi everyone, I've been away for a while (school, work, family) and I do feel gulity, but I'm slowly making my way back on the forum.

I have a template, that is made all out of tables. table this, table that, tr this, tr that. My question is: Is there any way (simple or at least understandable) that I can "convert" all these tables into a CSS layout?

Can I replace all the <table> tags with divs or something like that. I even tried to reproduce the layout from strach using Microsoft FP & HTML-Kit, but I got lost. Below is the body of the code, if you wanna see how many tables there are.

_____________________________________________________



<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="height:808px; ">
<tr bgcolor="#283136"><td><img src="images/spacer.gif" width="1" height="1" alt=""></td></tr>
<tr bgcolor="#546974"><td><img src="images/spacer.gif" width="1" height="1" alt=""></td></tr>
<tr><td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="head_bg">
<tr>
<td width="50%"><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td width="766">
<table cellpadding="0" cellspacing="0" border="0" width="766" style="height:380px;">
<tr>
<td><img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td width="100%">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="height:100%; ">
<tr><td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td height="87"><a href="#"><img src="images/h_logo.gif" alt="" style="margin:23px 0px 0px 16px;"></a></td>
<td align="right" width="100%" style="padding:23px 23px 0px 0px; ">
<table cellpadding="0" cellspacing="12" border="0" style="border:1px solid #546168; width:206px; height:40px; background:#2E3A40;">
<tr>
<td><img src="images/h_mark_icon.gif" alt="" style="margin:0px 6px 0px 12px;"><span><a href="index.html">Home</a></span></td>
<td><img src="images/h_mark_icon.gif" alt="" style="margin:0px 6px 0px 0px;"><span><a href="#">Search</a></span></td>
<td><img src="images/h_mark_icon.gif" alt="" style="margin:0px 6px 0px 5px;"><span><a href="#">FAQ</a></span></td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
<tr><td height="100%" style="background:url(images/h_bg.jpg) left 0px no-repeat;"><a href="#"><img src="images/h_txt.jpg" alt="" style="margin:107px 0px 0px 42px;"></a></td></tr>
<tr><td>
<table cellpadding="0" cellspacing="8" border="0">
<tr>
<td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image55','','images/m_0_act.gif',1)"><img src="images/m_0_act.gif" name="Image55" width="109" height="33" border="0" alt=""></a></td>
<td><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image56','','images/m_1_act.gif',1)"><img src="images/m_1.gif" name="Image56" width="97" height="33" border="0" alt=""></a></td>
<td><a href="index-2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image57','','images/m_2_act.gif',1)"><img src="images/m_2.gif" name="Image57" width="107" height="33" border="0" alt=""></a></td>
<td><a href="index-3.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image58','','images/m_3_act.gif',1)"><img src="images/m_3.gif" name="Image58" width="100" height="33" border="0" alt=""></a></td>
<td><a href="index-4.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image59','','images/m_4_act.gif',1)"><img src="images/m_4.gif" name="Image59" width="98" height="33" border="0" alt=""></a></td>
<td><a href="index-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image60','','images/m_5_act.gif',1)"><img src="images/m_5.gif" name="Image60" width="106" height="33" border="0" alt=""></a></td>
</tr>
</table>
</td></tr>
</table>
</td>
<td><img src="images/spacer.gif" width="46" height="1" alt=""></td>
</tr>
</table>
</td>
<td width="50%"><img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
</table>
</td></tr>
<tr><td bgcolor="#3B4A52"><img src="images/spacer.gif" width="1" height="1" alt=""></td></tr>
<tr><td class="bg_top">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style=" height:361px;" class="bg_bottom">
<tr>
<td width="50%">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style=" height:100%;">
<tr>
<td height="100%" width="100%"><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td style="background:url(images/corn_bg_l.gif) left top repeat-y; "><img src="images/corn_t_l.gif" alt=""></td>
</tr>
<tr>
<td width="100%"><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="images/corn_b_l.gif" alt=""></td>
</tr>
</table>
</td>
<td class="bg_top_1">
<table cellpadding="0" cellspacing="0" border="0" width="646" style="height:361px;" class="bg_bottom_1">
<tr><td height="360">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="height:361px;">
<tr>
<td><img src="images/spacer.gif" width="1" height="16" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td width="100%" height="100%">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td height="140"><img src="images/pic_0_1.jpg" alt="" align="left" style="margin:0px 22px 0px 0px;"><img src="images/title_0_1.gif" alt="" style="margin:10px 0px 17px 0px;"><br>
Mauris fermentum dictum. magna. Sed laort aliquam leount tellus dolor, dapibus eget, elementum velrsus eleifend, elit. Aenean auctor wisi et urna.

</td></tr>
<tr><td height="100%">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="170">
<tr><td height="18"><img src="images/title_0_2.gif" alt=""></td></tr>
<tr><td bgcolor="#66B8D9"><img src="images/spacer.gif" width="1" height="1" alt=""></td></tr>
<tr><td>
<ul style="padding:16px 0px 7px 0px; ">
<li><a href="#">Mauris fermnt dic magna</a></li>
<li><a href="#">Sed laoreet aliquam letellus </a></li>
<li><a href="#">Dapibus eget, elementum</a></li>
<li><a href="#">Aenean auctor wisi urna</a></li>
<li><a href="#">Aliquam erat volutpatturpis </a></li>
<li><a href="#">Integer rutrum antelacus</a></li>
</ul><br style=" line-height:1px;">
<img src="images/read_1.gif" alt="" style="margin:0px 4px 0px 0px;"><a href="#">learn more</a>

</td></tr>
</table>
</td>
<td width="100%"><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="177">
<tr><td height="18"><img src="images/title_0_3.gif" alt=""></td></tr>
<tr><td bgcolor="#66B8D9"><img src="images/spacer.gif" width="1" height="1" alt=""></td></tr>
<tr><td><img src="images/pic_0_2.jpg" alt="" style="margin:17px 0px 13px 0px;"><br>
<strong>Mauris fermentum sit dictum.</strong>
<br style=" line-height:1px;"><br style=" line-height:4px;">
Sed laort aliquam leount tellus dolor, dapibus eget, elementum velrsus.

</td></tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
</td>
<td><img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="197">
<tr><td height="237" style="border:1px solid #969DA2; background-image:url(images/box_gray_bg_t.gif); background-position:left top; background-repeat:repeat-x; background-color:#7C888F;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="height:100%; background:url(images/box_gray_bg_b.gif) left bottom repeat-x;">
<tr>
<td><img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td height="33"><img src="images/title_0_4.gif" alt="" style="margin:14px 0px 0px 0px;"></td></tr>
<tr><td bgcolor="#66B8D9"><img src="images/spacer.gif" width="1" height="1" alt=""></td></tr>
<tr><td height="100%" style="padding:0px 10px 0px 10px; ">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td height="80" style="padding:13px 0px 0px 0px; ">
<strong><i>[ 12.02.2006 ]</i></strong>
<br style=" line-height:1px;"><br style=" line-height:3px;">
<a href="#">Vestibulum ante ipsum primis</a><br>
<a href="#">faucibu fusce feugiat maleda</a>


</td></tr>
<tr><td bgcolor="#6A7981"><img src="images/spacer.gif" width="1" height="1" alt=""></td></tr>
<tr><td height="110" style="padding-top:16px; ">
<strong><i>[ 25.02.2006 ]</i></strong>
<br style=" line-height:1px;"><br style=" line-height:3px;">
<a href="#">Vestibulum ante ipsum primis</a><br>
<a href="#">faucibu fusce feugiat maleda</a>
<br style=" line-height:1px;"><br style=" line-height:28px;">
<img src="images/read_1.gif" alt="" style="margin:0px 4px 0px 0px;"><a href="#">learn more</a>
</td></tr>
</table>
</td></tr>
</table>
</td>
<td><img src="images/spacer.gif" width="8" height="1" alt=""></td>
</tr>
</table>
</td></tr>
<tr><td height="37"><a href="#"><img src="images/banner_0_1.jpg" alt="" style="margin:9px 0px 0px 0px;"></a></td></tr>

</table>
</td>
<td><img src="images/spacer.gif" width="10" height="1" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="1" height="20" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
</table>
</td></tr>

</table>
</td>
<td width="50%">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style=" height:100%;">
<tr>
<td style="background:url(images/corn_bg_r.gif) left top repeat-y; "><img src="images/corn_t_r.gif" alt=""></td>
<td height="100%" width="100%"><img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td><img src="images/corn_b_r.gif" alt=""></td>
<td width="100%"><img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
<tr><td height="100%" align="center" class="footer"><div style="height:64px; ">Copyright &copy; 2006, Business Company, All Rights Reserved &nbsp; | &nbsp; <a href="index-6.html">Privacy Policy</a></div></td></tr>
</table>
</body>

----------------------------------------
[Edit 2 times, last edit by admin at Aug 17, 2006 8:59:20 PM]
[Aug 17, 2006 2:41:53 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male admin
Advanced Member
Member's Avatar


Joined: Jun 14, 2003
Post Count: 2940
Status: Offline
Reply to this Post  Reply with Quote 
Re: Going From Tables to CSS
Hi,

The best thing to do is to find a CSS layout / template that matches the layout that you have in the table based version.

Right now, there are no translation tools that will do this programmatically.
----------------------------------------
Stefan Mischook

Video Tutorial Store | Web Templates
[Aug 17, 2006 9:00:54 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male mandarseo
Stranger



India
Joined: Jun 29, 2006
Post Count: 9
Status: Offline
Reply to this Post  Reply with Quote 
Re: Going From Tables to CSS
I think you should go for any CSS based template and then shift your site on the new template. The <table> tags are not very much search engine friendly and hence it is wise to move for CSS which are meant for the thing you want.

With regards,
----------------------------------------
http://www.e-zest.net
http://www.e-zest.net/Software_developement_india.html
[Aug 18, 2006 3:41:30 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: Going From Tables to CSS
There should be a few more tables in that layout!hypnotized

Sometimes it's possible to convert an exisisting layout without too much trouble, but in this case, with that many tables, all the inline styles, attributes, javascript and spacer gifs starting over is your best bet.
----------------------------------------
Quiquid latine dictum sit altum viditur
[Aug 18, 2006 4:35:23 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male cboudy
Advanced Member
Member's Avatar


Joined: May 26, 2006
Post Count: 1757
Status: Offline
Reply to this Post  Reply with Quote 
Re: Going From Tables to CSS
thanks, all. I figured statring over would be the route I would have to take.
[Aug 18, 2006 9:10:52 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female Susie
Advanced Member
Member's Avatar

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline
Reply to this Post  Reply with Quote 
Re: Going From Tables to CSS
I'm almost finished with switching the first site I ever built over to pure CSS. It was table heavy! What I ended up doing was creating my layout with CSS and once I got it the way I wanted it, I would paste my 'template' onto the page I was ready to convert. Then I just went down the page and extracted the info from the old portion and inserted it into the new CSS portion. Then I just deleted everything below my </body> tag of the new portion.

Confused yet? hehe... biggrin
[Aug 18, 2006 2:13:40 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread

RSS feeds Current timezone is GMT
May 22, 2013 5:59:42 PM

Powered by mvnForum 1.2.1 GA (Build: 20 November 2008)
Copyright © 2002-2008 by MyVietnam.net