Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Convert Table to CSS

Reply
Thread Tools

Convert Table to CSS

 
 
nightstar@gmail.com
Guest
Posts: n/a
 
      08-12-2005
Hello,

I have been working with CSS for some little time now and have a
conversion that needs to be done. We are supposed to convert (to divs)
a table very similar to:

<table width="100%">
<tr>
<td>Header Left</td>
<td>Header Center</td>
<td>Header Right</td>
</tr>
<tr>
<td colspan="3">Section 1</td>
</tr>
<tr>
<td colspan="2">Section 2</td>
<td>Section 3</td>
</tr>
<tr>
<td>Footer Left</td>
<td>Footer Center</td>
<td>Footer Right</td>
</tr>
</table>

I have been working on this for a couple hours now and seem to be
getting major overlapping on the Y axis. Each row is generated via php
and database and can be a dynamic height (I believe this is where my
issue is). I would appreciate it if someone could whip up a quick css
file. I know widths are very easiy controled so im not concerned with
that. It was recommended by the boss to use as much absolute
positioning as possible but I do not believe it can be done not knowing
the height of each row.

Thank you very much and Im looking forward to some good insight as I
have looked at numerous sites and templates and still have issues.

 
Reply With Quote
 
 
 
 
Chris Beall
Guest
Posts: n/a
 
      08-12-2005
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

> Hello,
>
> I have been working with CSS for some little time now and have a
> conversion that needs to be done. We are supposed to convert (to divs)
> a table very similar to:
>
> <table width="100%">
> <tr>
> <td>Header Left</td>
> <td>Header Center</td>
> <td>Header Right</td>
> </tr>
> <tr>
> <td colspan="3">Section 1</td>
> </tr>
> <tr>
> <td colspan="2">Section 2</td>
> <td>Section 3</td>
> </tr>
> <tr>
> <td>Footer Left</td>
> <td>Footer Center</td>
> <td>Footer Right</td>
> </tr>
> </table>

(snip)
> Thank you very much and Im looking forward to some good insight as I
> have looked at numerous sites and templates and still have issues.
>

nightstar,

It's late and I'm tired and I haven't tested this, but it may give you a
starting point:

<div>
<div style="float: left; width: 33%">
Header left
</div>
<div style="float: left; width: 33%">
Header center
</div>
<div style="float: left; width: 33%">
Header right
</div>
</div>
<div style="clear: all"> (or is it "both"? One of them is deprecated)
Section 1
</div>
<div style-"clear: all">
<div style="float: left; width: 66%">
Section 2
</div>
<div style="float: left; width: 33%">
Section 3
</div>
</div>
<div style="clear: all">
<div style="float: left; width: 33%">
Footer left
</div>
<div style="float: left; width: 33%">
Footer center
</div>
<div style="float: left; width: 33%">
Footer right
</div>
</div>

Of course I've made some assumptions about the content and what physical
relationships need to be preserved. A URL pointing to the current page
would be a help.

Chris Beall

 
Reply With Quote
 
 
 
 
Toby Inkster
Guest
Posts: n/a
 
      08-12-2005
Chris Beall wrote:

> <div style="clear: all"> (or is it "both"? One of them is deprecated)


style="clear:both". style="clear:all" is not deprecated -- it was never
valid to begin with.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Chris Beall
Guest
Posts: n/a
 
      08-12-2005
Toby Inkster wrote:
> Chris Beall wrote:
>
>
>><div style="clear: all"> (or is it "both"? One of them is deprecated)

>
>
> style="clear:both". style="clear:all" is not deprecated -- it was never
> valid to begin with.
>

Toby,

"both" it is, then. I must've dreamed the other one.

Anyway, with "both" I tested what I posted earlier and it works as I
intended. Whether it meets the requirements of the OP I don't know...

Chris Beall

 
Reply With Quote
 
mihanmc mihanmc is offline
Junior Member
Join Date: May 2011
Posts: 1
 
      05-15-2011
Hello
i want convert table to css , but i cant
can you help me?

<tr>
<td colspan="2" class="tool">
<table width="99%" cellpadding="3" cellspacing="0" border="0">
<tr>
<td align="right" style="font-size: 8pt;">
<a href="<?=$url?>">صفحه نخست</a> &nbsp; | &nbsp;
<a href="<?=$url?>/pages"><?=$set["extra_page"] ? $set["extra_page"] : "صفحات اضافي"?></a> &nbsp; | &nbsp;
<a href="<?=$url?>/search.html">جستجوی پیشرفته</a> &nbsp; | &nbsp;
<a href="<?=$url?>/contact.html">تماس با ما</a> &nbsp; | &nbsp;
<a href="<?=$url?>/meta/sitemap.html" target="_blank" title="Sitemap">نقشه سایت</a> &nbsp; | &nbsp;
</td>
<td align="left" valign="top" style="padding-top:4px;">
<a title="RSS" class="meta" target="_blank" href="<?=$url?>/meta/rss.xml">RSS</a>
<a title="Sitemap" class="meta" target="_blank" href="<?=$url?>/meta/map.xml">SITEMAP</a>
</td>
<td align="left"><form action="<?=$url?>/search.html" method="post">
<input name="q" type="text" class="search" size="30" value="<?if(@trim($_POST['q'])){echo $_POST['q'];}else{echo "نام محصول را اینجا وارد کن...";}?>" onclick="value=''"/><input type="submit" value="جستجو" class="search" title="Search"/><input type="hidden" name="db" value="all"/></form></td>
</tr>
</table>
</td>
</tr>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Convert table based webpage to css based John Dalberg HTML 11 05-29-2009 08:53 PM
Convert table to CSS markuffelen@gmail.com HTML 3 05-23-2007 06:49 PM
table convert to css Joker7 HTML 3 09-11-2005 09:20 AM
Re: Convert table based webpage to css based Mark Parnell HTML 1 02-04-2005 04:07 PM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM



Advertisments