CSS: table like info.

Discussion in 'Web Design and Development' started by c3str, Jun 27, 2007.

  1. c3str macrumors member

    Jun 27, 2007
    Hi all. I humbly ask for mercy. I am a designer and Director/multimedia developer who is venturing into learning CSS/non table based design.

    Normally I never ask for help, I always look for tutorials, but I'm helping out a friend with a new business with minimal budget and learning CSS @ the same time. Basic question is this. I have a set of text based information, basically stuff like phone number and then the number, address, then the address...you get the idea.

    In the past, I would have thrown that info. into a table and then called it a day. However I am trying to challenge myself to format this using CSS.

    Here is what I have attempted thus far:
    (url deleted)

    The bottom line is...It seems like there must be a more elegant way. Ideally, for the "labels" (artist, email etc.) I would want the black background just fitting behind the text, however for that I'd have to separate them back into individual divs.

    Basically, I humbly ask for help and advice in terms of what the most elegant way to present this. Sure, I could use position: absolute on each of the divs, but then if someone enlarges/changes the text size in their browser...ick. Seems to defeat the whole purpose of trying to do this the "right"/CSS way if I go about it like that.

    thanking you greatly in advance,
  2. c3str thread starter macrumors member

    Jun 27, 2007
    Another version

    BTW, here is another earlier version. It's all kinds of ugly, but that brings me to why I'm trying to learn to do it *right*. :)

    url deleted

    This version does show what I mean in terms of isolating the black background just to the label itself.

    I/the "client" prefers this look, but you can see the problem immediately when enlarging the text even one setting.
  3. yagran macrumors 6502a

    Jan 8, 2007
    Brighton, East Sussex, UK
    <style type="text/css">
    #labels {
    .labeltext {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFF;
    <div id="labels">
      <p class="labeltext">Label 1</p>
      <p class="labeltext">Label 2</p>
      <p class="labeltext">Label 3</p>
    cant you just do that?
  4. plinden macrumors 68040


    Apr 8, 2004
    The idea behind tableless CSS+HTML is to not use tables for layout. If content is such that it is really a table (like the contact info on your pages) then go ahead and use a table.
  5. savar macrumors 68000


    Jun 6, 2003
    District of Columbia
    If this is tabular data, you should be using a table.

    The general key is that if you're nesting tables, you're probably doing something that would be better done with CSS.
  6. c3str thread starter macrumors member

    Jun 27, 2007
    Roger, OK go tables

    Got it. Thanks for the advice. I was going a little too literal on the "no tables" point in my quest to be standards compliant.

    Thanks again---appreciate it.
  7. LastLine macrumors 65816

    Aug 24, 2005
    Yeah, I tend to hold the "Is this something I'd create in excel?" policy - if I can say yes to that it goes in a table, if it's not, it doesn't - dunno if that makes any sense?

Share This Page