Results 1 to 16 of 16

Thread: Table like div's

  1. #1
    Senior Member GijsZePa's Avatar
    Join Date
    Jul 2007
    Location
    Nieuw-Vennep, The Netherlands
    Posts
    2,800

    Default Table like div's

    Somebody knowing an easy way to 'fake' a table style with div's ? It's not that difficult If the values have the same length, but that's not sure in my case. Like to Have something like this:

    <table>
    <tr>
    <td>Article</td><td>Price</td>
    </tr>
    </table>

    Not sure of the width of the article 'field'

    Martin

  2. #2
    Senior Member gogo's Avatar
    Join Date
    Oct 2007
    Location
    planet Gogon - M25 class planet
    Posts
    3,452

    Default

    You want two vertical columns and then things layed out same in each to create table?

  3. #3
    Senior Member GijsZePa's Avatar
    Join Date
    Jul 2007
    Location
    Nieuw-Vennep, The Netherlands
    Posts
    2,800

    Default

    Quote Originally Posted by gogo View Post
    You want two vertical columns and then things layed out same in each to create table?
    Yes...sounds easy...but without table tags..not that easy ;-)

  4. #4
    Senior Member gogo's Avatar
    Join Date
    Oct 2007
    Location
    planet Gogon - M25 class planet
    Posts
    3,452

    Default

    create two divs, float one to the left. Within each div same layout, ie two divs again (one floated left), set widths for these in absolute figures or as &#37;. The latter gives scalable layout, but you can set max/min widths within the divs as well as a %.

  5. #5
    Senior Member gogo's Avatar
    Join Date
    Oct 2007
    Location
    planet Gogon - M25 class planet
    Posts
    3,452

    Default

    Sorry I think you just want two columns without subcolumns? Just create two divs, float one to the left aand then use the CSS to control widths as said. Is this helping?

  6. #6
    MobiEnthusiast coast's Avatar
    Join Date
    Jul 2007
    Posts
    4,720

    Default

    Quote Originally Posted by gogo View Post
    Sorry I think you just want two columns without subcolumns? Just create two divs, float one to the left aand then use the CSS to control widths as said. Is this helping?
    Do you need to float the other column to the right, or will it position itself naturally with the width on the left-floating div?
    Need a developer? MobileSiteStore.com | More good stuff at Drosty.com
    Accepting Quality guest posts via PM only for mobiEnthusiast.mobi
    (NO press releases or story ideas, completed, unique articles only
    )

  7. #7
    Senior Member GijsZePa's Avatar
    Join Date
    Jul 2007
    Location
    Nieuw-Vennep, The Netherlands
    Posts
    2,800

    Default

    Quote Originally Posted by gogo View Post
    Sorry I think you just want two columns without subcolumns? Just create two divs, float one to the left aand then use the CSS to control widths as said. Is this helping?
    2 or more columns..

    I try something like this:

    css:
    --

    DIV.left-1{
    border: none; float: left; margin: 0; padding: 0; width: 40%;
    }
    DIV.left-2 {
    border: none; float: left; margin: 0; padding: 0; width: 40%;
    }
    DIV.right-1 {
    border: none; float: right; margin: 0; padding: 0; width: 20%;

    --

    <div class="table-row">
    <div class="left-1"><p class="text">Hallo</p></div>
    <div class="left-2"><p class="text">Goodby</p></div>
    <div class="right-1"><p class="text">124</p></div>
    </div>

    Thanx for pointing me to the right direction

  8. #8
    Senior Member gogo's Avatar
    Join Date
    Oct 2007
    Location
    planet Gogon - M25 class planet
    Posts
    3,452

    Default

    3 columns works but gets more complicated - you create a column, then within it a subcolumn which has two columns. Then you calculate widths accordingly eg 33&#37; 50% 50% gives three equal columns

  9. #9
    Senior Member gogo's Avatar
    Join Date
    Oct 2007
    Location
    planet Gogon - M25 class planet
    Posts
    3,452

    Default

    Quote Originally Posted by coast View Post
    Do you need to float the other column to the right, or will it position itself naturally with the width on the left-floating div?
    Probably no need to float it, but always check in several browsers. It should just position itself, but stuff below might come up if you do not clear it on the right.



    Sometimes you need to put an empty div after the floated one(s) to "clear the float" ie stop stuff from further down the page coming up.

    ie
    <div class="empty">
    </div>

    and in the css put:

    .empty {clear:both;}

  10. #10
    Senior Member gogo's Avatar
    Join Date
    Oct 2007
    Location
    planet Gogon - M25 class planet
    Posts
    3,452

    Default

    Hi I was writing quickly and I know Gi knows his stuff, but I should say that in reality you find its better to leave a little margin, eg 49&#37; and 49% as opposed to 50:50, just try and see how it looks.

    Here's a super demo where you can actually see how the float works
    http://www.barelyfitz.com/screencast...s/positioning/

    and this is excellent resource :http://css.maxdesign.com.au/floatuto...torial0101.htm

    Ok, I did get CSStutorial.mobi, just thinking what the minimum of content would be - a quick reference for those on the move.

  11. #11
    Senior Member GijsZePa's Avatar
    Join Date
    Jul 2007
    Location
    Nieuw-Vennep, The Netherlands
    Posts
    2,800

    Default

    Quote Originally Posted by gogo View Post
    Hi I was writing quickly and I know Gi knows his stuff, but I should say that in reality you find its better to leave a little margin, eg 49% and 49% as opposed to 50:50, just try and see how it looks.

    Here's a super demo where you can actually see how the float works
    http://www.barelyfitz.com/screencast...s/positioning/

    and this is excellent resource :http://css.maxdesign.com.au/floatuto...torial0101.htm

    Ok, I did get CSStutorial.mobi, just thinking what the minimum of content would be - a quick reference for those on the move.
    Thanx gogo...added those to my bookmarks !!

    Martin

  12. #12
    Senior Member GijsZePa's Avatar
    Join Date
    Jul 2007
    Location
    Nieuw-Vennep, The Netherlands
    Posts
    2,800

    Default

    I was always thinking that using the <table> tag within a .mobi site wasn't allowed...concering the .mobi specs..but hey. Was I wrong ?

    I just found this post on mobiforge (not that new btw):

    http://mobiforge.com/testing/story/fixit-tables

    "Note that while the use of tables is permitted, it is recommended to use an alternative to tabular layout where possible. For this reason this test results in a WARN rather than a FAIL when a <table> element is detected. Your ready.mobi score is not affected by including tables in your markup. "

    This makes live a little easier...

    Martin
    <signature police forced me to remove my image that was too large and had nothing to do with a mobi site >


    Autodisk.mobi - all dutch carspecs | Manage all your holiday accommodations with our online manager.

  13. #13
    Senior Member gogo's Avatar
    Join Date
    Oct 2007
    Location
    planet Gogon - M25 class planet
    Posts
    3,452

    Default

    when do you actually need a table that you can't actually get the same results with CSS?

  14. #14
    Senior Member GijsZePa's Avatar
    Join Date
    Jul 2007
    Location
    Nieuw-Vennep, The Netherlands
    Posts
    2,800

    Default

    Quote Originally Posted by gogo View Post
    when do you actually need a table that you can't actually get the same results with CSS?
    Nope...but I experience quite some diffuculties on several different phone browsers with the css solution. What looks fine on a nokia 6300...sux on a N96 for example..

    Martin
    <signature police forced me to remove my image that was too large and had nothing to do with a mobi site >


    Autodisk.mobi - all dutch carspecs | Manage all your holiday accommodations with our online manager.

  15. #15
    Senior Member developmy.mobi's Avatar
    Join Date
    Aug 2007
    Location
    Western Mass
    Posts
    1,115

    Default

    I have a real easy way to do it.

    Here is your codes:

    Code:
    <div class="table">
         <div class="row">
              <div class="cell">Left Cell</div>
              <div class="cell">Right Cell</div>
         </div>
    </div>
    CSS:
    Code:
    .table {
         width: 100%;
         display: table;
    }
    .row {
         display: table-row;
    }
    .cell {
         width: 50%;
         display: table-cell;
    }
    ENJOY!

  16. #16
    Senior Member GijsZePa's Avatar
    Join Date
    Jul 2007
    Location
    Nieuw-Vennep, The Netherlands
    Posts
    2,800

    Default

    Quote Originally Posted by developmy.mobi View Post
    I have a real easy way to do it.

    Here is your codes:

    Code:
    <div class="table">
         <div class="row">
              <div class="cell">Left Cell</div>
              <div class="cell">Right Cell</div>
         </div>
    </div>
    CSS:
    Code:
    .table {
         width: 100%;
         display: table;
    }
    .row {
         display: table-row;
    }
    .cell {
         width: 50%;
         display: table-cell;
    }
    ENJOY!

    Thanks... ! I hope that's browser independent..

    Martin
    <signature police forced me to remove my image that was too large and had nothing to do with a mobi site >


    Autodisk.mobi - all dutch carspecs | Manage all your holiday accommodations with our online manager.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
A Yup.mobi Mobile Site
Mobile Dating