SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Camas, WA (USA)
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Leaving the <TABLE> tag...where to start?

    I'm finally getting around to converting some of my sites to the "proper" way of doing things. For one, I'm finally abandoning tables wherever I can, but in a lot of cases...I don't know what to use instead.

    Take the ugly mess below for instance...which looks fine, but takes up a whole lot of code for something CSS could very easily snap into place (I think)


    HTML Code:
    <table width="740" align="center" border="0">
      <tr>
        <td>
          <table width="100%">
            <tr> 
              <td width="340" align="left" valign="top" bgcolor="#CCFFCC" class="chart_title"><a name="Name"></a><b>Name</b></td>
              <td width="200" align="left" valign="top" bgcolor="#CCFFCC" class="genre">Genre</div></td>
              <td width="100" align="center" valign="top" bgcolor="#CCFFCC" class="price">US <b>$XX</b></td>
              <td width="100" align="center" valign="top" bgcolor="#CCFFCC" class="media">Media Content</td>
            </tr>
          </table>
          <table width="100%">
            <tr> 
              <td class="buynow" width="100" valign="top"><img src="#" border="0"></td>
              <td class="chart_description" valign="top">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  
                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
                sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
              </td>
              <td class="icons" width="100" align="center" valign="top"> 
                <img src="#" width="35" height="35" alt="description" border="0"> 
                <img src="#" width="35" height="35" alt="description" border="0">
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    If I'm moving away from the deprecated TABLE tags...what are the proper tags for this? Should I use everything as a nested DIV, an unordered list, SPAN classes, etc.. Any suggestions are welcomed...thank you!

  2. #2
    SitePoint Zealot jadmadi's Avatar
    Join Date
    Sep 2003
    Location
    Jordan
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transitioning

    Hi -
    I think the easiest way to begin is just with the (x)html tags - what purpose do they serve, 'naturally' and how can you take advantage of that fact - or 'tweak' them [such as styling lists for links and definition lists for image thumbnails, etc.]? -- This in tandem with the actual *content*, of course!

    Sketch-out or begin applying styles to change how you'd like things to appear, next - just with background, text color, fonts, images...and then move onto any positioning skills.

    It helps to remember the 'cascade' of CSS in ['flow' going top to bottom in your doc] and how inline and block-level elements operate. Major positioning adjustments shouldn't need to be done that often - just keep it simple as you practice with css basics for styling your content.

    When you've got some things 'under your belt', go ahead and do your styles as an external sheet that links to your pages - it's much easier to edit when all the code isn't lumped into one doc or [horror!] done with inline style tags.

    Just build from there...& good luck,
    El

  4. #4
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Camas, WA (USA)
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick replies. Both of those sites look like TONS of info. I'll do some more digging. I can experiment with all of the formatting, but I guess my main question is dealing with tables themselves. If they're deprecated, what are we supposed to replace them with? I could abandon the <TABLE> and <TR> tags and replace every <TD> with a <DIV>, or I could use <UL> and <LI> for each area, or who knows? It just seems like this is a case where a table actually DOES make sense.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    If they're deprecated, what are we supposed to replace them with?
    Tables aren't deprecated and probably never will be. I think your a bit confused there

    Tables are meant for tabular data and the w3c encourages you to choose elements for their proper purpose. This means that if you have tabular data then a table is perfect and should be used.

    However the use of tables for pure layout is often discouraged when there are css alternatives that will do the job just as well or even better.

    You will find is some cases that a certain type of layout can only be done with a table and in these cases I think a table layout is ok as long as you keep it simple (no heavily nested tables) and use css for all the contents.

    Hybrid table layouts are a good way for beginners to learn the transisition to css because you have some familiarity with tables to achieve your effect and then you can work on the css. As you get more proficient you can dispose of the table altogether.

    If you look at the FAQ sticky thread and the three column sticky thread you will find examples and answers to common questions which you will no doubt encounter in your journey through css.

    Looking at your above code it does look like a table is suitable for that content and so you can use it without regret

    Paul

  6. #6
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Camas, WA (USA)
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    that really helps. I just keep hearing about the evils of tables, but i guess that the deprecation just refers to using them as a crutch for page layout. If I still keep the table, appying CSS for the layout will be a breeze. Thanks again!


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
  •