Markup of a HTML table

**chris_stfc** · Aug 30, 2007 06:28

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>

**DaveWoods** · Aug 30, 2007 06:37

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.

**AutisticCuckoo** · Aug 30, 2007 06:42

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.

**all4nerds** · Aug 30, 2007 12:24

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>

**Dan Schulz** · Aug 30, 2007 14:06

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?.

**AutisticCuckoo** · Aug 30, 2007 22:16

@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.

User Tag List

Thread: Markup of a HTML table

Thread Tools

Display

Markup of a HTML table

Bookmarks

Bookmarks

Posting Permissions