1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Is this bad for todays standards? Need advice?

Discussion in 'CSS' started by jlocke, Sep 22, 2006.

0
  1. #1
    Below is a sample bare bones tables example page similiar to what I use on my site for just the main section (without the top logo section/footer). I am not sure how bad this is, but it seemed to serve its purpose for a number of years.

    I am looking for input on this code whether still good or bad.. I am looking at updating it to bring it up to todays coding standards if necessary. Perhaps bring more of a web 2.0 feel for the right hand section heading.

    Is it wrong to still use tables in this manner? I remember doing this for cross browser compatability but eventually it fell a part and only worked with newer browsers. I use some CSS, but should I be moving away from using tables completely?

    Any input good or bad appreciated. thx


    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<style type="text/css">
body, td, div   { font-family: verdana, helvetica, sans-serif; font-size: 8pt; margin: 0; padding: 0; }
.heading  { font-family: arial,helvetica,sans-serif; line-height: 20px; background-color: #E7F0FA; }
a.heading { color: #000080; font-weight: bold; }
.title	{ font-family: Tahoma,arial,sans-serif; vertical-align: top; }
a.titlelink 	{ color: #000080; font-weight: bold; }
.blue		{ color: #000080; vertical-align: top; }
.source        { font-family: Tahoma; color: #003366; font-size: 8pt; text-decoration: none }
.footer { font-family: Tahoma,arial,sans-serif; text-align: right }
</style>
</head>

<body>

<table border="0" cellpadding="4" cellspacing="4" width="100%" style="border-collapse: collapse">
  <tr>
  <!-- Right side menu -->
    <td width="160" style="vertical-align: top">&nbsp;I put a pretty<br>
    table here <br>
for a menu<br>
    with 160px size<
  <!-- Close right side menu -->
    </td>
    
    
    <!-- spacer to keep things neat since cellspacing/padding do not always work -->    
    <td width="12">&nbsp;</td>
    <!-- Main content middle section -->    
    <td style="vertical-align: top" width="40%">There is lots of data and nice markup in this main section.sdfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdf 
    dsfdsf;skd;flkdsf;lsdfk'sdfksdf'sfdgdfgdfgfdgfdgdfgdfgdfgdfgdgdfgdf dfgdfgdgfdgdfgfdgfdgfdgfdgfdgdfgdfgdfgdgdgdgdgdgdgdgdgdfgddfgdfgdfgdfgdfg 
    dfgdfgdfgdfgdgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgfdgdfgdf&nbsp; 
    
    <!-- Close middle section -->    
    </td>   
    
    <!-- spacer to keep things neat since cellspacing/padding do not always work -->
    <td width="12">&nbsp;</td>
    
    <!-- right table cell -->
  <td style="vertical-align: top">
 
    <!-- This is the right side section with links -->
    <table border="0" width="100%" cellspacing="6">
      <tr>
        <td colspan="2" class="heading"><b>&nbsp;<a href="section">Side sections</a></b> </td>
      </tr>
      <tr>
        <td class="blue">•</td>
        <td class="title"><b><a href="article1.html">This is article 1</a></b> <br>
        <a class="source" href="articlesourcelink.html">Source</a> <br>
        Description of the article<br>
        </td>
      </tr>
      <tr>
        <td class="blue">•</td>
        <td class="title"><b><a href="article1.html">This is article 2</a></b> <br>
        <a class="source" href="articlesourcelink.html">Source</a> <br>
        Description of the article<br>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="footer"><a class="footer" href="more">More this section...</a> </td>
      </tr>
    </table>
    <!-- Close side section -->
    
&nbsp;</td>
    <!-- Close right table cell -->
  </tr>
</table>

</body>

</html>
    Code (markup):
     
    jlocke, Sep 22, 2006 IP
  2. MiamiHost

    MiamiHost Peon

    Messages:
    238
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    MiamiHost, Sep 22, 2006 IP
  3. jlocke

    jlocke Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3

    Yes, and it validates as HTML 4.01 Transitional
     
    jlocke, Sep 23, 2006 IP
  4. halotree

    halotree Peon

    Messages:
    211
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    nowadays, with all these validations, I would use XHTML + CSS, so much easier... in my opinion.
     
    halotree, Sep 23, 2006 IP
  5. blis102

    blis102 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Tables are not really necessary anymore if you do proper XHTML and CSS. The disadvantages in Tables are numerious. First off, they jumble up your code and can be difficult to edit. Also, most designers dont understand how to style tables completely through CSS, because they dont know its possible.

    If you are going to use tables, only use them for table data, like spreadsheets, and similar presentations. And if you really feel a need to work with tables, then do the styling through CSS. For Example:


    
<style type="text/css">

#page {}
#page tr {}
#page td#heading {}
#page td#sidebar {}
#page td#content {}
#page td#footer {}

</style>


<table id="page">
 <tr>
  <td colspan="2" id="heading">Heading</td>
 </tr>
 <tr>
  <td id="sidebar">SideBar</td>
  <td id="content">Content would be here</td>
 </tr>
 <tr>
  <td colspan="2" id="footer">Footer Here</td>
 </tr>
</table>
    Code (markup):
    Then you would go ahead and apply styles to the different elements as needed. You can apply background colors, widths, text properties, padding, margins, borders, anything... Go ahead and try that out if you want to stick with tables. This way your code is clean, and easily changed. (notice that it gets rid of ALL html styles to the table, which makes it easy to edit)

    Once you are confortable applying IDs and CLASSes to things, go ahead and try making cells out of DIV tags. There are countless resources out there to help you. Heres a few:

    http://www.thinkvitamin.com/
    http://simplebits.com/
    http://www.alistapart.com/
    http://www.cssbeauty.com/
    http://www.csszengarden.com/

    Those are just a few. Check em out

    Cheers
     
    blis102, Sep 23, 2006 IP