How to create a table that.

I can add a column to in the future

[myrrh]

I need to create a page that is a list of links to certain articles. I need to include date, article title, and author. In the future I will be converting those articles to audio files, so I want an easy way to add that info (a link to the audio) when the time comes.

I like the idea of using a table to display this information. So, is using an HTML table the best way to do this? (I will style it with CSS)

And if so, how can I make it such that I can easily add a column to that table in the future? If I create the table with four <td></td>s and don't put anything in the cells that are to become the future fourth column, is there a way I can make the table look nice during the time it has only three items per line?

[rocknbil]

Since your data is tabular - that is, an intersection of data in rows and columns - a table is completely appropriate.

Tables should contract to the content, that is, if there's no content* the table should "squeeze" to whatever is there. So a simple solution would be:

CSS:

#mytable { margin: auto; } 
#mytable td { padding: 6px; } 
#mytable th {  
 padding: 6px; background:#000;  
 color: #fff;  
 font-weight:bold;  
} 
#mytable .empty {  
 padding:0;  
 width:0;  
 background:none;  
 font-size:2px; 
} 

HTML. Cellspacing is the only attribute not really addressed by CSS, although there are discussions here about border-collapse that may work in your environment.

<table id="mytable" cellspacing="0"> 
<tr> 
 <th>col 1</th> 
 <th>col 2</th> 
 <th class="empty">&nbsp;</th> 
 <th class="empty">&nbsp;</th> 
</tr> 
<tr> 
 <td> data 1a</td> 
 <td> data 1b</td> 
 <td class="empty">&nbsp;</td> 
 <td class="empty">&nbsp;</td> 
</tr> 
<tr> 
 <td> data 2a</td> 
 <td> data 2b</td> 
 <td class="empty">&nbsp;</td> 
 <td class="empty">&nbsp;</td> 
</tr> 
</table> 

* Note the non breaking space in empty cells. IE abhors empty cells, making for weird looking tables at times. It also doesn't render anything smaller than 2px, which is why the extra coding for class "empty".

You may not even need the empty selectors if the table doesn't "explode" too much.

[Readie]

Just to build on Rock's point about IE hating empty cells, if you find that your table is looking wierd, (like cells being taller than you wanted them to be) it's often because of the non-breaking space.

Make sure you set them to the same font as the rest of the table, if not something smaller.