SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Why go tableless???

    Hi,

    I'm fairly new to CSS and I'm trying to learn more so eventually I can update my page with CSS. I've read several articles and topics over going tabless using CSS and I tried to use this techique. After playing around with some CSS, I was able to recreate part of my page using CSS and no tables, however I don't really see the benefit of doing this (plus there might be browser inconsistencies?).
    Here is the code that it takes to create the top menu using CSS. I'm including both the style sheet and the HTML code below and you can see the page http://www.fotbal.net/includes/test/header.html

    .top {
    position: absolute;
    width: 600px;
    top: 0px;
    left: 0px;
    height: 75px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0px ;
    background: #00639C;
    }
    .topleft {
    position: absolute;
    left: 0px;
    width: 265px;
    z-index:1;
    }

    .middleleft {
    position: absolute;
    left: 0px;
    padding: 0px 0px 0px 265px;
    width: 75px;
    z-index:1;
    }
    .middleright {
    position: absolute;
    left: 0px;
    padding: 0px 0px 0px 340px;
    width: 224px;
    z-index:1;
    }

    .topright{
    position: absolute;
    right: 0px;
    width: 36px;
    z-index:1;
    }


    <div class="top">
    <div class="topleft">
    <a href="/"><IMG alt="Fotbal Minut Cu Minut" border=0 height="75" width="265" src="http://www.fotbal.net/poze/titlu.jpg"></a>
    </div>
    <div class="middleleft">
    <img alt="logo" src="/poze/logo.gif" height="75" width=75 border="0">
    </div>
    <div class="middleright">
    <FORM ACTION="/cgi-bin/perlfect/search/search.pl" METHOD="get">
    <INPUT TYPE="submit" VALUE="Cauta prin pagini" ><p>
    <INPUT NAME="q">
    </FORM>
    </div>
    <div class="topright">
    <a href="/english"><img src="/poze/eng.gif" alt="Engleza" width="36" height="19" border="0"></a>
    <a href="/"><img src="/poze/rom.gif" alt="Romana" width="36" height="19" border="0"></a>
    </div>
    </div>

    Now here is what this part of the page looked like before I used CSS (using tables). You can see this part here :

    <table valign = "top" align="center" width="600" border="0" cellpadding="0" cellspacing="0">
    <tr align="center" bgcolor="#00639C">
    <td align="left" width="600">
    <table border="0" cellpadding="0" cellspacing="0" width="600" align="left" height="75">
    <tr align="left">
    <td align="left" valign="bottom" width="265" colspan="7" bgcolor="black"><a href="/english"><IMG alt="Fotbal Minut Cu Minut" border=0 height="75" width="265" src="http://www.fotbal.net/poze/titlu.jpg"></a></td>
    <td align="left" valign="bottom" width="75" colspan="3" bgcolor="black"><IMG alt="logo" border=0 height=75 src="/poze/logo.gif" width=75></td>
    <td align="left" valign="bottom" width="153" colspan="4">
    <table border="0" cellpadding="0" cellspacing="0" align="left" bgcolor="#00639C">
    <FORM ACTION="/cgi-bin/perlfect_en/search/search.pl" METHOD="get">
    <TR><TD height="24"><INPUT TYPE="submit" VALUE="Search all pages" ></TD></TR>
    <tr><td><img src="/transition.gif" width="153" height="27" border="0" alt=""></td></tr>
    <TR><TD><INPUT NAME="q"></TD></TR>
    </FORM>
    </table>
    </td>
    <td colspan="3" align="right" valign="top" width="107">
    <a href="/english"><img src="/poze/eng.gif" alt="Engleza" width="36" height="19" border="0" align="right" ></a>
    <a href="/"><img src="/poze/rom.gif" alt="Romana" width="36" height="19" border="0" align="right"></a>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>


    It seems that just by using HTML and tables there is less work than if i use HTML and CSS to avoid using tables. So why is it considered better to use CSS rather than use tables? Or this is just a rare instance where using tables is actually shorter?
    Last edited by testmonkey; Jan 29, 2003 at 23:09.

  2. #2
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well if you really wanna make it small, your first code could look like :

    Code:
    .top { position: absolute; width: 600px; top: 0px; left: 0px; height: 75px; margin: 0; padding: 0; background: #00639C; }
    .topleft { position: absolute; left: 0px; width: 265px; z-index:1; }
    .middleleft { position: absolute; left: 0px; padding: 0 0 0 265px; width: 75px; z-index:1; }
    .middleright { position: absolute; left: 0px; padding: 0 0 0 340px; width: 224px; z-index:1; }
    .topright { position: absolute; right: 0px; width: 36px; z-index:1; }
    img { border:0; }
    .topright a img { width:36px; height:19px; } 
    
    
    <div class="top">
    	<div class="topleft">
    		<a href="/"><img alt="Fotbal Minut Cu Minut" height="75" width="265" src="http://www.fotbal.net/poze/titlu.jpg" /></a> 
    	</div>
    	<div class="middleleft">
    		<img alt="logo" src="/poze/logo.gif" height="75" width="75" />
    	</div>
    	<div class="middleright">
    		<form action="/cgi-bin/perlfect/search/search.pl" method="get">
    			<input type="submit" value="Cauta prin pagini" /><p>
    			<input name="q" /> 
    		</form>
    	</div>
    	<div class="topright">
    		<a href="/english"><img src="/poze/eng.gif" alt="Engleza" /></a>
    		<a href="/"><img src="/poze/rom.gif" alt="Romana" /></a>
    	</div>
    </div>

    (i xhtml-ized it by the way )

    You could even if you really wanted to make it as small as possible do something like:

    Code:
    .top, .topleft, .middleleft, .middleright, .topright { position: absolute; left:0px; z-index:1; }
    .top { width: 600px; top: 0px; height: 75px; margin: 0; padding: 0; background: #00639C; z-index:0; }
    .topleft { width: 265px; }
    .middleleft { padding: 0 0 0 265px; width: 75px; }
    .middleright { padding: 0 0 0 340px; width: 224px; }
    .topright { left:auto; right: 0px; width: 36px; }
    img { border:0; }
    .topright a img { width:36px; height:19px; } 
    
    
    <div class="top">
    	<div class="topleft">
    		<a href="/"><img alt="Fotbal Minut Cu Minut" height="75" width="265" src="http://www.fotbal.net/poze/titlu.jpg" /></a> 
    	</div>
    	<div class="middleleft">
    		<img alt="logo" src="/poze/logo.gif" height="75" width="75" />
    	</div>
    	<div class="middleright">
    		<form action="/cgi-bin/perlfect/search/search.pl" method="get">
    			<input type="submit" value="Cauta prin pagini" /><p>
    			<input name="q" /> 
    		</form>
    	</div>
    	<div class="topright">
    		<a href="/english"><img src="/poze/eng.gif" alt="Engleza" /></a>
    		<a href="/"><img src="/poze/rom.gif" alt="Romana" /></a>
    	</div>
    </div>
    but well i wouldn't encourage it as the css part is not much readable this way (for the gain in size it brings), though this kind of technique can be useful if your css is big.

    Advantages, to name a few:
    - if you put your css in an external file, it will be downloaded once and cached by client's browser, and he'll only have to download the content part for all your other pages (when he as to download the table every single time.
    - file size is still smaller, even with the css.
    - on file allows you to manage all your page display, and the html pages only hold content.
    - i'm sure if you read a few posts in this forum you'll get many other reasons.

    Disadvantage: creating the css layout is a pain in the *** compared with the relative easiness of a table-layout. But well it's probably only a matter of getting used to it.

    just my thoughts
    Quentin

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    A coouple of other points about CSS:

    CSS is much more friendly with regards to accessibility, whereas screenreaders etc have a very hard time with tables.

    As you may have read there have been lawsuits in America where sites have not been accessible as it is considered to be discriminating to part of the audience. With CSS the mark up is mainly text and can be accessed easily by screen readers and the like. Also users can choose their own user defined stylesheets which will allow them to view your site in a style that suits them. Basically your design should fit the user and not make the user fit your design

    I think the point is that you should not be trying to recreate yout tables with CSS but design your site to be as fluid and accomodating as possible using the features of css. CSS can do things that are impossible with tables.

    Even with your example you can see that the code is much lighter than those complicated tables and if you put your css in an external file as described above you have nearly half the page size.

    Browser compatability is an issue at the moment but if you code according to the standards (i.e. correct doctype) eventually your code will become more compatible as browsers improve. Therefore making your site future-proof as opposed to past-proof with tables.

    CSS is a bit harder to grasp at the start, but also remember there is nothing worse than trying to update a site that has deeply nested tables. With CSS you update one file and can change the look of the whole site. In fact you can build in a variety of styles and browsers such as Mozilla will let the user choose which style sheet they require.

    Well they are just a few of my thoughts but I'm sure that bodies such as W3C wouldn't advise not to use tables for layout if there were no good reason. After all the W3C was founded by Tim Berners Lee who has been credited with creating the world wide web, so I think he has some idea.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I will eventually have to go to start using CSS more and perhaps eventually replace all the tables (I'd really like not to have to deal with tables).
    But for now I think I'm gonna stick with the tables a couple of reasons:

    - My page is split into files, so the header(top part of hte page) is loaded from one file for all pages (so if I change the header once, it is changed on the entire site). This is similar to having one stylesheet as far as ease of maintenance.
    - There are still some inconsistencies between the broswers (i.e. you can see some differences in the example that I showed between Netscape and IE)
    - I need to get a lot more familiar with CSS so I can be able to fully utilize it.

    Regardless, I will have to start using more CSS because as you mentioned there are many benefits that it brings, but I will probably wait until the browsers provide better support (especially the older ones).

    BTW, how do you center CSS on a page? For instance if I want an area of 600px in the middle of the screen (regardles of the screen size). I've only seen ways to center text but not an entire area.

  5. #5
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    about centering, use a container with text-align:center.
    you have a nice example here of a static width centered layout.

    Quentin

  6. #6
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by the way, what kind of differences do you have between browsers for this layout ? maybe we can help .

    Quentin

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by testmonkey
    I think I will eventually have to go to start using CSS more and perhaps eventually replace all the tables (I'd really like not to have to deal with tables).
    But for now I think I'm gonna stick with the tables a couple of reasons:

    - My page is split into files, so the header(top part of hte page) is loaded from one file for all pages (so if I change the header once, it is changed on the entire site). This is similar to having one stylesheet as far as ease of maintenance.
    You can still use a include file with DIVs. I use them on my XHTML site for the header, footer and navigation and it works just like tables, only MUCH easier to maintain.

    - There are still some inconsistencies between the broswers (i.e. you can see some differences in the example that I showed between Netscape and IE)
    Yes there are some inconsistencies with regards to how browsers will render your markup (esp. with IE's box model problem), but let me ask you this: how many hacks and workarounds have to had to write to make your site design consistent in IE and Netscape? Probably a lot, with a lot of non-standard features/markup.

    I also think you're not getting the point of XHTML. The point is to allow for flexible designs, not a pixel-perfect layout. If that's what you want then by all means stick with HTML 4.0 and don't bother with XHTML for the site you're trying to redesign.

    If/when you redo your site in XHTML, keep in mind that your markup doesn't HAVE to be pixel-perfect, and that other devices besides visual browsers on computers can look at your page.

    - I need to get a lot more familiar with CSS so I can be able to fully utilize it.
    Well, what better way to start then by creating a site with CSS?

    Regardless, I will have to start using more CSS because as you mentioned there are many benefits that it brings, but I will probably wait until the browsers provide better support (especially the older ones).
    How can older browsers provide better support when they are not being updated? Netscape 4 will never support XHTML, as it is a browser from 1997 and barely got specs from 1995 and 1996 right, much less the XHTML spec from 1999/2000.

    BTW, how do you center CSS on a page? For instance if I want an area of 600px in the middle of the screen (regardles of the screen size). I've only seen ways to center text but not an entire area.
    Try this:
    CSS
    Code:
    /*
    note: will only work with an
    XHTML DOCTYPE. HTML 4.0 will not 
    center with margin:auto 
    */
    #frame {
      width:600px;
      margin:auto;
    }
    HTML
    Code:
    <div id="frame">Your stuff goes here</div>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi ,

    re your comment:


    "note: will only work with an
    XHTML DOCTYPE. HTML 4.0 will not
    center with margin:auto"


    It centres ok in Ie6 with strict html 4.01.

    It doesn't centre in ie6 xhmtl if you use the xml prolog (<?xml version="1.0" encoding="iso-8859-1"?>)This puts IE6 into quirks mode. (A major bug)

    So it's probably better to surround it with another div all the time just to be sure.

    Paul

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by Paul O'B
    Hi ,

    re your comment:


    "note: will only work with an
    XHTML DOCTYPE. HTML 4.0 will not
    center with margin:auto"


    It centres ok in Ie6 with strict html 4.01.

    It doesn't centre in ie6 xhmtl if you use the xml prolog (<?xml version="1.0" encoding="iso-8859-1"?>)This puts IE6 into quirks mode. (A major bug)

    So it's probably better to surround it with another div all the time just to be sure.

    Paul
    Yes HTML 4.01 strict will do the trick, but not HTML 4.0 or 4.01 loose.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I was just about to try those but you beat me to it.

    Paul

  11. #11
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try to center the page when I get home using your recommandations

    I also think you're not getting the point of XHTML. The point is to allow for flexible designs, not a pixel-perfect layout. If that's what you want then by all means stick with HTML 4.0 and don't bother with XHTML for the site you're trying to redesign.
    vgarcia...are you saying that in general it's not a good idea to specify the size of the blocks(i.e. 600px)? In other words let the page fill the entire window?

    by the way, what kind of differences do you have between browsers for this layout ? maybe we can help .
    Quentin...The differences that I'm talking about in the example that I used are in the middle part where I have a button and a search box. In IE, it looks as expected, nicely aligned, but in Netscape the Serach button is in the middle of the area and the seach box is a stlightly below.
    Try this linke in IE and Netscape: http://www.fotbal.net/includes/test/header.html

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by testmonkey

    vgarcia...are you saying that in general it's not a good idea to specify the size of the blocks(i.e. 600px)? In other words let the page fill the entire window?
    I am not saying that specifying the size is bad, per se. I am just saying that with XHTML the screen is only one possible medium that your site will be viewed in. There's also screen readers for the visually impaired, print, handheld devices, refigerators that go online, etc. XHTML is about separating style from content, so your content can be seen anywhere, and your stylesheet dictates how the content is displayed. For the record though, my personal XHTML site is 100% width. I see uses and downsides to both fixed-position and liquid layouts, so I use whichever is appropriate.


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
  •