SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Creating Tables

  1. #1
    SitePoint Member
    Join Date
    May 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Creating Tables

    What are the different methods of creating tables for layouts? I use Dreamweaver and my little knowledge of html just allows me to insert tables using the software. I create and use tables using the insert option in dreamweaver; how can I create different types of tables that are better, creative and web 2.0?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    "Web 2.0" doesn't involve the use of tables for layout. You should use the appropriate HTML tag for the appropriate job. If you have a table of data ("tabular data") then use a table.

    Normally people use the DIV tag to make the main structure of their page, i.e. the framework of the page. Then you should use other elements for whatever purpose they were intended, such as UL or OL elements for lists, P elements for paragraphs, H1 and friends for headings, and so on.

    Look up "semantic markup" on google and you'll find a wealth of information.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bethennyengland View Post
    What are the different methods of creating tables for layouts? I use Dreamweaver and my little knowledge of html just allows me to insert tables using the software. I create and use tables using the insert option in dreamweaver; how can I create different types of tables that are better, creative and web 2.0?
    It sounds like your new to web design. Welcome to the community

    To catch up with current best practices in the industry, I recommend you look into the following resources:

    Ian Lloyd's SitePoint book is a fantastic beginner's resource that will teach you semantic markup and CSS layouts, among other things.

    Opera's Web Standards Curriculum is a free online resource to learn many of the same lessons in Ian's book.

    Finally, you may want to seek out a web design meetup group of some sort in your local area. Sometimes these groups are called Refresh or Web Standards Cafe, or you can search for web design on event sites like meetup.com or Upcoming.

    Sorry for the lack of links, I'm short on time today. Good luck!

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Until your IE7 and earlier users fall low enough you can't use tables for layout as those browsers don't support those CSS commands.

    Of course you could always just present the 35% of people still using those antique browsers with a simpler layout while presenting everyone else with the table based one.

    To do layout tables you need display:table, display:table-row and display:table-cell in your CSS attached to the appropriate HTML elements.
    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="^$">

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ian Lloyd's SitePoint book is a fantastic beginner's resource that will teach you semantic markup and CSS layouts, among other things.
    chris ++ absolutely

    Felgall why are you trying to confuse the OP?? She said tables for layout, not "layout tables". Or did DreamBeaver suddenly start pumping out display: table all of a sudden???

    I don't see why anyone, anywhere, would build a page with display: table, whether IE exists or not. I guess you could build your house out of spoons too, but I just can't see why...

  7. #7
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See Two column layout for modern browsers for one reason to use {display: table;}. For another use, see Poetry and verse in the html page.

    There are a number of peculiarities in the display property's table-group that will expand the effects we can achieve without a bunch of odd html and css to cause confusion.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  8. #8
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    chris ++ absolutely

    Felgall why are you trying to confuse the OP?? She said tables for layout, not "layout tables". Or did DreamBeaver suddenly start pumping out display: table all of a sudden???

    I don't see why anyone, anywhere, would build a page with display: table, whether IE exists or not. I guess you could build your house out of spoons too, but I just can't see why...
    DreamBeaver

    Hahahahahahaha
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Gary I didn't mean there's no use for display: table but I don't see the point in doing an entire page like that... unless you're coming from tabled layouts and see things that way (maybe why Felgall mentioned it to the OP?). I do see your nice demo. I don't like trying to figure out which browser needs all three elements and which only need two (table/row/cell).

    Blake there's another name we use in our house but it's likely not appropriate for a public forum : )

  10. #10
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I don't see why anyone, anywhere, would build a page with display: table, whether IE exists or not. I guess you could build your house out of spoons too, but I just can't see why...
    I like the spoons bit

    I bought the SP book "Everything you know about css is wrong" and have been using css table layout on a few 'in the wild' websites that I've added to my signature (not the first 2 about the dogs).

    They are great for equal height columns, and it's nice to go through firefox, ie8, opera, safari and chrome and see that it looks the same the whole way through.

    The main problem though is divitis. Firefox 3.0 and the first version of Chrome have sporadic problems interpreting anonymous table elements, therefore you need table, row and cell to make it work 100% of the time in these browsers. Proviso: I haven't tested this in later versions.

    Spacing is another problem. As an example, if you have 3 cells with background colours and you want spaces between them with the left and right cells touching the left and right edges of the parent container, you can't use border-spacing. You need another div for that. At least I do

    My only other gripe is nothing easy that works like colspan.

    As for IE, I'm fairly comfortable with floats, and I have no problem with conditional comments, so I just stick them in a separate stylesheet.

    Those are just my thoughts, and sorry for going off topic. To answer your original question bethennyengland, tables should only be used for presenting data that naturally goes in tables.

    You can use css to style them and make them better, more creative and more web2.0.

    I can't remember if dreamweaver puts a border round them or not, but that is a fairly easy one to adjust using css.

    There's a decent article here to give you a few ideas too http://www.smashingmagazine.com/2008...table-designs/

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    My only other gripe is nothing easy that works like colspan.
    Does that work in FF? I've never used it because of that... why I've never striped my columns. : (

    OP:
    And I'm going to second Ian's book again, because it was that good. : )

    After that, basic CSS for layouts instead of tables:
    HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer... both these books are old enough to be in the public library if you like FREE.

  12. #12
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not to sure what you mean by 'does that work in FF' Stomme, but if you want 2 columns above 3 columns you can either create separate css tables or do what is described here http://www.sitepoint.com/newsletter/...06&format=html (if anybody can find the article it would be easier to read).

    I don't find either solution appealing, but I use the 2-table approach.

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah sorry I was thinking of something else... reading too fast.

    I guess I just don't think "in tables". While I can see "columns" in a web page, I have to work harder mentally to think of how that would be written in a real table... colspan wouldn't occur to me until too late. Guess I'm a div-and-float kinda girl, and I blame the fact that I started in this business after tables stopped being cool, so I never learned to get comfortable with tables.


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
  •