SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Markup of a HTML table

    Hi Guys,

    I'm trying to design my site in CSS and have some data which has to go in a table. Obviously I know how to create a table, but what's the 'proper' markup in html for a table in CSS:

    I'm doing it like so, but it looks strange in FF:

    HTML Code:
    <table class="content_table" summary="Football Tables">
      <thead>
        <th><acronym title="Position">Pos.</acronym></th>
        <th><acronym title="Team">Team</acronym></th>
        <th><acronym title="Played">P</acronym></th>
        <th><acronym title="Points">Pnts</acronym></th>
      </thead>
      <tbody>
        <tr> 
          <td>1</td>
          <td>Team A</td>
          <td>0</td>
          <td>0</td>
        </tr>
        <tr> 
          <td>2</td>
          <td>Team B</td>
          <td>0</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There isn't a 'proper' CSS markup for a table so to speak. You just style it however you want it to look.

    For example, a basic bit of styling could use.
    Code:
    * {
        padding: 0; margin: 0;    
    }
    body {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 77&#37;;
        padding: 10px;
    }
    table {
        border-collapse: collapse;    
    }
    th, td {
        border: solid 1px #666;
        padding: 5px;
    }
    th {
        background-color: #CCC;    
    }
    Also don't forget to include the scope attribute on your <th> tags. In your case you'll need <th scope="col"> to associate those table headings with that column.

    Also you don't need an acronym on the team heading whilst I'd also consider using <abbr> instead of <acronym> for the other three. I'd use <accronym> for something like P.T.O. or F.B.I. whereas words like Pts, Pos or Info are abbreviations of longer words.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A couple of comments on that markup:
    • Pos., Team, P and Pnts are not acronyms. Three of them are abbreviations, but Team isn't even that.
    • 'Football Tables' is not a summary of your table. It looks more like a caption, for which you should use <caption>. A summary should contain a summary (duh!) of the table's content.
    Birnam wood is come to Dunsinane

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Your mark-up can be very clean , unfortunately there is no cross-browser css
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{text-align:center;}
    	
    	* {margin:0;padding:0;}
    	
    	body{background:#ccccff;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:.75em;}
    	
    	.tbla caption,.tbla,.tbla th,.tbla td{
    	border-color:#0099cc;
    	border-style:solid;
    	font-size:1em;
    	}
    	
    	.tbla th,.tbla td{padding:.5em;}
    	
    	.tbla caption{background:#9999ff;border-width:1px 1px 0 1px;font-weight:600;padding-top:.7em;padding-bottom:.3em;}
    	
    	.tbla th{text-align:center;font-weight:600;font-style:italic;}
    	
    	.tbla{border-width:1px 0 1px 1px;width:100&#37;;}
    	.tbla td{border-width:1px 1px 0 0;font-style:normal;}
    	.tbla th{border-width:0px 1px 0 0;color:#000000;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
    	
    	
    	.tbla col.a{background:#ffccff;text-align:right;width:33.3%;}
    	.tbla col.b{background:#99ccff;text-align:left;width:33.3%;}
    	.tbla col.c{background:#ccffff;text-align:center;width:33.3%;color:#ff0000;font-family:"Comic Sans MS", sans-serif;}
    	
    	head+body .tbla tr td {background:#ffccff;text-align:right;}
    	head+body .tbla tr td + td {background:#99ccff;text-align:left;}
    	head+body .tbla tr td + td + td {background:#ccffff;text-align:center;color:#ff0000;font-family: "Comic Sans MS", Geneva, sans-serif;}
    	
    	.x{width:64em;margin:1em auto;}
    	
    	.tbla th:first-letter {color:#fe7807;}
    	.tbla th{text-transform:capitalize;}
    	</style>
    </head>
    <body>
    
    <div class="x">
    
    <table cellspacing="0" summary="aa" class="tbla">
    <caption>table</caption>
    <col class="a" /><col class="b" /><col class="c" />
    <thead>
    <tr>
    <th>one</th>
    <th>two</th>
    <th>three</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>one x</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    <tr>
    <td>FF needs a Div to center ?</td>
    <td>it detaches the </td>
    <td>caption ?</td>
    </tr>
    </tbody>
    </table>
    
    </div>
    
    </body>
    </html>

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And if you're going to use a table, you're going to want the base display to be consistent across browsers. Try this:

    Code CSS:
    table {
    	border-collapse: collapse;
    	empty-cells: show;
    	table-layout: fixed;
    }

    Don't add a class or ID to the table selector (or replace the selector with a class or ID) since there's no need to. You'll be "resetting" all table elements (by table elements I mean <table></table>, not the contents) so why defeat that purpose by resettting just one (type of) table?.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Dan: there is no point in declaring empty-cells:show if you have border-collapse:collapse, since it only applies in the separated borders model.

    Using table-layout:fixed is not always useful, or even possible, and you should understand how it works before trying to use it. You'll also need to specify a width (other than auto) for the table if you're going to use the fixed table layout algorithm. Although user agents may use it even with width:auto, they are not required to.
    Birnam wood is come to Dunsinane


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
  •