SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    2 tables or one?

    Hallo monks and gurus,

    I built a table last week and today when looking at it, realised I may have done it kinda stoopid. So I'm pretty sure I need to change it, but not sure of the best way.

    Currently the table is something like this (pseudo table code):
    <table etc...>
    <thead and th's/>
    <tbody>
    <stuff>
    <th with a sub-heading (h3)>
    <more stuff>
    </tbody>
    </table>

    So, okay, it can't be right to have a big th in the tbody and kinda doesn't make any sense to have a header in the middle. What the header does is signify that everything below it belongs in its own subcategory.

    So, I thought I cannot have more than one thead but I could have more than one tbody right? However the <h3> does pretty much belong in a th as it is a column-spanning header.

    So second though was a nested table-within-a-table. All this stuff does at some point seem to belong in one table.
    so
    <table>
    <thead and th's/>
    <tbody>
    <first stuff>
    <td>
    <2nd table>
    <thead and th/>
    <tbody>
    <sub stuff>
    </tbody>
    </table>
    </td>
    </tbody>
    </table>

    Or, at the very beginning I had had 2 separate tables however the default styling of the tables didn't match up as far as column widths (which are dynamic as stuff changes inside them) and when I saw them not matching it made me realise that the reason they should match is because it should be very clear that the sub-articles are not separate but in fact are just a grouping within the total.

    So currently I'm thinking 2 tables is also not right.

    Table is basically products (in packets, groups of stuff), with the sub category being accessories (single items of the product packages, mostly ordered for repairs etc).

    This is also all in one large form, as people can read the info in the data table AND choose to select these products and move on to a shopping cart.

    ideas on the best way to accessibly present this? While 2 tables doesn't seem to make visual sense, if it makes sense otherwise to have two separate tables I will just add extra classes and styling to make them visually look the same-- but only want to do that if it's the best way.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends on whether the content in the two parts is related or not. One way to do this, if the parts are related, is as follows,
    Code HTML4Strict:
    <table>
      <thead>...column headings...</thead>
      <tbody>
        ...
      </tbody>
      <tbody>
        <tr><th colspan="...">pseudo-heading</th></tr>
        ...
      </tbody>
    </table>
    In other words, use two row groups (tbody elements) to indicate that there are two separate groups of rows. The rows within a group are more closely related to one another than to the rows in the other group, but all of the rows are related in some way.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yeah they're all related (at least I believe they are)

    So I think you answered my question.. even with multiple tbodies I didn't know if I could make sense with another th inside the second one.

    Thanks!

  4. #4
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are allowed to nest the tables as long as you do it in the right order

  5. #5
    SitePoint Enthusiast headless1226's Avatar
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Go tableless!!

    It provides cleaner design make up and faster load times!
    Develareel Innovate
    Blogsreel Reel World Blog
    Social Network Connect here

  6. #6
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ugh if I could see you Id slap you
    semantic markup is the way to go.
    Tables should be used for tabular data only. I went through a tables phase myself. In a couple months you will see how much easier it is to code websites using semantic markup and css..until then may the force be with you

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    This sounds like it is tabular data and trherefore should be in a table.

    There is almost never a situation where tables should be nested since that would imply that elements in your tabular data are themselves tables of tabular data.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't read whether or not his code is actually tabular data. His general statement about tables is what makes me mad

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    BBoardx, these are definitely tables and should be in tables : )
    Quote Originally Posted by Bboardx
    I went through a tables phase myself. In a couple months you will see how much easier it is to code websites using semantic markup and css..until then may the force be with you
    I haven't ever gone through a tables phase-- they were already uncool when I got started in HTML, so instead I slogged my way through my first real tables the long and hard way, making calendars and pricing tables with hovers and doing strange stuff with JS... bleh.
    btw I discovered recently that JAWS does support axis! I was so teh thrilled.

    Don't worry people, I have never and will never build whole page layouts in tables. : ) Taking something which belongs in a table and using something else and then CSSing it to look like a table is terrible. Don't do it.
    ----
    I did not want to nest them if I didn't have to. I have currently used this solution thx to Tommy (though I do kinda have a second header without an actual thead):
    <table>
    <thead>
    th's
    </thead>
    <tbody>
    main products
    </tbody>
    <tbody>
    one multi-col th which is full-width, header of all subcolumns
    th's like above, as these subproducts also have the same headers
    single products, a subcategory of the main products above
    </tbody>
    </table>

    I knew I could have two tbodies, but didn't know about the th's being okay in the middle of the table. I was kinda thinking of not having the second batch of th's and using "headers" attribute instead, but visual people needed the headers repeated too.

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I have currently used this solution thx to Tommy (though I do kinda have a second header without an actual thead):
    Yes, but the header cells in the thead apply for the whole table (all rows), whereas the second header only applies within one row group. Nothing seriously wrong with that.
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yes, but the header cells in the thead apply for the whole table (all rows), whereas the second header only applies within one row group.
    Actually they are the same, only repeated to make it easier for people to read.

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah. That does not sound quite right.
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Should I post it?

    Each group of products have an image (tho I don't have any for them), a pakket (package name), a description, a price per group/thing.

    The singular accessoire products have the same things, an image, a name (in place of package), a description, a price. But they are not groups of things but single pieces.
    Code:
    <form action="selectthingies" method="post" id="formSelect">
      <fieldset>
        <table class="kooptabel" summary="Selecteer uw pakket(en) van de tabel">
          <thead>
            <tr>
    	  <th class="aligned" colspan="5" scope="colgroup"><h3>Basis Pakket</h3></th>
            </tr>
            <tr>
      	  <th scope="col">Afbeelding</th>
              <th scope="col">Aantal pakketten</th>
              <th scope="col">Pakket</th>
    	  <th scope="col">Details</th>
              <th scope="col">Prijs per item (incl. BTW)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
    	  <td scope="row"><a href="details.html#totaalpakket"><img src="images/normaalpakket.jpg" height="85" width="105" alt="standaard ### pakket in wit" /></a></td>
              <td><input type="checkbox" name="standaardwit" id="standaardwit" checked="checked" /></td>
    	  <td><label for="standaardwit">Totaal Pakket</label></td>
    	  <td class="descript"><a href="details.html#totaalpakket">1 thingie, aansluiting thingie, met thingie thing (1 jaar abonnement)</a></td>
    	  <td class="geld"> 699,00 +  18 per maand</td>
            </tr>
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="standaard ### pakket in zwart" /></a></td>		
              <td><input type="checkbox" name="standaardzwart" id="standaardzwart" /></td>
    	  <td><label for="standaardzwart">Totaal Pakket Zwart </label></td>
    	  <td class="descript"><a href="details.html#pakketzwart">1 ###, aansluiting ###, geen htingie thing</a></td>
    	  <td class="geld"> 699,00</td>
            </tr>
    Here be several other pakkets, simply not now in the current code
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="thingie met 1 Jaar abonnement" /></a></td>
              <td><input type="checkbox" name="pakket1" id="pakket1" /></td>
    	  <td><label for="pakket1">1 Jaar Abonnement</label></td>
    	  <td class="descript"><a href="voorwaarden.html#abonnement1">thingie komt met 1-jaar abonnement</a></td>
    	  <td class="geld"> 1000,00</td>
            </tr>
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="thingie thing met 2 jaar abonnement" /></a></td>
              <td ><input type="checkbox" name="pakket2" id="pakket2" /></td>
    	  <td><label for="pakket2">2 Jaar Abonnement</label></td>
    	  <td class="descript"><a href="voorwaarden.html#abonnement2">thingie thing komt met 2-jaar abonnement</a></td>
    	  <td class="geld"> 1000,00</td>
            </tr>
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="thingie thing met 3 jaar abonnement" /></a></td>
              <td><input type="checkbox" name="pakket3" id="pakket3" /></td>
    	  <td><label for="pakket3">3 Jaar Abonnement</label></td>
    	  <td class="descript"><a href="voorwaarden.html#abonnement3.html">thingie thing komt met 3-jaar abonnement</a></td>
    	  <td class="geld"> 1000,00</td>
            </tr>
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="#### zonder thingie" /></a></td>
              <td><input type="checkbox" name="pakketzonder" id="pakketzonder" /></td>
    	  <td><label for="pakketzonder">Pakket Zonder</label></td>
    	  <td class="descript"><a href="voorwaarden.html#abonnement3.html">### zonder thingie thing</a></td>
    	  <td class="geld"> 1000,00</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <th class="aligned" colspan="5" scope="colgroup"><h3>Accessoires</h3></th>
            </tr>
            <tr>
      	  <th scope="col">Afbeelding</th>
              <th scope="col">Aantal pakketten</th>
              <th scope="col">Pakket</th>
    	  <th scope="col">Details</th>
              <th scope="col">Prijs per item</th>
            </tr>
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="pakket 4??" /></a></td>
              <td><input type="checkbox" name="pakket4" id="pakket4" /></td>
    	  <td><label for="pakket4">Pakket 4</label></td>
    	  <td class="descript">iets?</td>
    	  <td class="geld"> 1000,00</td>
            </tr>
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="thingiething" /></a></td>
    	  <td><input type="checkbox" name="thingie" id="thingie" /></td>
    	  <td><label for="simkaart">thingie thing alleen</label></td>
    	  <td class="descript">thingie gemaakt door... met wie?</td>
    	  <td class="geld"> 800,00</td>
            </tr>
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="Alleen de ###" /></a></td>
    	  <td><input type="checkbox" name="###" id="###" /></td>
    	  <td><label for="###">### alleen</label></td>
    	  <td class="descript">U kunt tot 5 ###s hebben per systeem</td>
    	  <td class="geld"> 800,00</td>
            </tr>
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="Kabel" /></a></td>
    	  <td><input type="checkbox" name="kabeltje" id="kabeltje" /></td>
    	  <td><label for="kabeltje">Kabel alleen</label></td>
    	  <td class="descript">Kabel voor dit en dat en de andere...</td>
    	  <td class="geld"> 200,00</td>
            </tr>
            <tr>
    	  <td scope="row"><a href="#"><img src="" alt="iets??" /></a></td>
    	  <td><input type="checkbox" name="iets" id="iets" /></td>
    	  <td><label for="iets">Iets meer?</label></td>
    	  <td class="descript">Beschrijving???</td>
              <td class="geld"> 1000,00</td>
            </tr-->
          </tbody>
        </table>
        <div class="inputs">
          <input type="submit" class="submit" value="Naar winkelwagon &gt;&gt;" />
        </div>
      </fieldset>
    </form>
    Any errors above are from me changing stuff in the message box here : )

    Originally I had 2 tables, one with the main header above it and the other with the h3 kinda inbetween them... however it seemed to me that whether people were buying groups of products or single pieces of prodcuts, should be the same table. But I still needed a header or something to more obviously separate the total packages from the individual items (which, if you wanted to, for whatever reason, you could make your own package by buying all the loose items... ).

    So, thoughts?


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
  •