www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS Tables and DIV's and then some!

  1. #1
    Join Date
    Jul 2007
    Posts
    11

    Question CSS Tables and DIV's and then some!

    I've been an application developer for 10 years and I just recently got thrown a project doing front end work. Since the time i use to do front end work alot of the way tables has changed and I am not up to date. I've done alot of reading on nhw to get certain things done without using html tables and relying more on the style sheet for the UI control. I do have a few questions that I am not able to find answers online somewhere. It seems that most of it is for basic div and table stuff.

    1. I need to make a table with borders. The purpose of this table to display a data result set. typically i would just define a table class and set the border to 1px but it seems that this can be accomplished without using the table tag in the css or in the html. If i were to do something as basic as this table below. how would i accomplish it with XHTML and CSS without using any table tags or the best way?

    <table border="1" cellspacing="2" cellpadding="2">
    <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>DATE</th>
    </tr>
    <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>01/01/2007</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Jane Kim</td>
    <td>07/07/2007</td>
    </tr>
    </table>


    2. I see classes like this and wondering what the meaning of it is.

    #bd #main #primary div.upsell a.else{
    display:block;
    float:left;
    width:268px;
    margin-right:7px;
    height:100px;
    margin-top:-7px;
    }

    what is the difference with using the "#" sign and ".className"?

    Thanks for any help

  2. #2
    Join Date
    May 2005
    Posts
    2,040
    1) Tabular data is what a table is for so use it for that. CSS is not a substitute for a table. It looks like what you have there should be in a table.

    2) # indicates a unique name for one element on a page for styling that one element only. The dot is for classes which can be assigned to any element so all those elements receive the same styling.

  3. #3
    Join Date
    Jul 2007
    Posts
    113
    Quote Originally Posted by codeHermit
    1. I need to make a table with borders. The purpose of this table to display a data result set. typically i would just define a table class and set the border to 1px but it seems that this can be accomplished without using the table tag in the css or in the html. If i were to do something as basic as this table below. how would i accomplish it with XHTML and CSS without using any table tags or the best way?


    2. I see classes like this and wondering what the meaning of it is.

    #bd #main #primary div.upsell a.else{
    display:block;
    float:left;
    width:268px;
    margin-right:7px;
    height:100px;
    margin-top:-7px;
    }

    what is the difference with using the "#" sign and ".className"?

    Thanks for any help
    Hi codehermit,

    The easiest way to style a table is to give it an id or class. The # indicates an id the . a class. The difference is that an id should be unique for each page, that is only use it once. A class can be applied as often as you need to.

    I typically use id for main structural elements like header, footer, navigation, etc.

    If you want to style a table give it either an id or class, for example
    <table id="info"> or <table class="info"> You can use the same term for classes and ids but I wouldn't recommend it. Too easy to get confused.

    Anyway, after you have given the table a style hook, it's also a JavaScript hook but that's for another day, you can add style to the table.

    table#info {
    width: 99%;
    border: 1px solid #999;
    }
    That would surround the table with a border but not the cells.

    Now you can use:
    table#info td {
    padding: 3px;
    margin: 3px;
    border: 1px solid #999;
    }

    The padding replaces cellpadding in html table tags. The margin replaces cellspacing. The border tag places a border around each cell. So you can almost get rid of all html attributes in the table. The one exception is valign. There is no CSS equivalent. There's a lot more you can do with CSS and tables. http://icant.co.uk/csstablegallery/

    You notice that the last CSS declaration table#info td became pretty specific. Read it as all cells in the table with the id of info. You string progressively more specific identifiers to make the target of your CSS exactly what you want. I could have gone farther, for example:

    table#info td p.reference a:hover {
    background: #990;
    }

    That targets only the links during hover state in paragraph with class reference in cells of table id info, giving them a background color of yellow. Because more specific style declarations override more general ones you can style different parts of a page differently.
    Last edited by mactheweb; 08-07-2007 at 11:07 PM.

  4. #4
    Join Date
    Jul 2007
    Posts
    113
    I don't know why I said that valign has no CSS equivalent. vertical-align works just fine in cells.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles