Convert Table to CSS

Discussion in 'HTML' started by nightstar@gmail.com, Aug 12, 2005.

  1. Guest

    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.
    , Aug 12, 2005
    #1
    1. Advertising

  2. Chris Beall Guest

    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
    Chris Beall, Aug 12, 2005
    #2
    1. Advertising

  3. Toby Inkster Guest

    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
    Toby Inkster, Aug 12, 2005
    #3
  4. Chris Beall Guest

    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
    Chris Beall, Aug 12, 2005
    #4
  5. mihanmc

    Joined:
    May 15, 2011
    Messages:
    1
    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>
    mihanmc, May 15, 2011
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    697
    clintonG
    Dec 24, 2004
  2. John Dalberg
    Replies:
    11
    Views:
    14,364
    irishdreaming
    May 29, 2009
  3. Mark Parnell
    Replies:
    1
    Views:
    423
    John Dalberg
    Feb 4, 2005
  4. Joker7

    table convert to css

    Joker7, Sep 10, 2005, in forum: HTML
    Replies:
    3
    Views:
    885
    Obvious
    Sep 11, 2005
  5. Replies:
    3
    Views:
    491
    =?ISO-8859-1?Q?G=E9rard_Talbot?=
    May 23, 2007
Loading...

Share This Page