Any way of doing very thin border lines around all the cells with very minimal code ?

[Dez]

Hi all, is there any way of getting a very thin border line around all the cells, without any css and without styling each individual cell please?

<table width="27%" id="table1" cellspacing="1" border="0.6em" cellpadding="0">
	<tr>
		<td width="57" style="border-style: solid; border-width: 1px">&nbsp;</td>
		<td width="61" style="border-style: solid; border-width: 1px"><b><font size="2">Text</font></b></td>
		<td width="70" style="border-style: solid; border-width: 1px"><b><font size="2">Text</font></b></td>
		<td style="border-style: solid; border-width: 1px"><b><font size="2">Text</font></b></td>
	</tr>
	<tr>
		<td width="57" style="border-style: solid; border-width: 1px"><b><font size="2">Text</font></b></td>
		<td width="61" style="border-style: solid; border-width: 1px"><font size="2">30</font></td>
		<td width="70" style="border-style: solid; border-width: 1px"><font size="2">120</font></td>
		<td style="border-style: solid; border-width: 1px"><font size="2">180</font></td>
	</tr>
	<tr>
		<td width="57" style="border-style: solid; border-width: 1px"><b><font size="2">Text</font></b></td>
		<td width="61" style="border-style: solid; border-width: 1px"><font size="2">15</font></td>
		<td width="70" style="border-style: solid; border-width: 1px"><font size="2">60</font></td>
		<td style="border-style: solid; border-width: 1px"><font size="2">90</font></td>
	</tr>
	<tr>
		<td width="57" style="border-style: solid; border-width: 1px"><b><font size="2">Text</font></b></td>
		<td width="61" style="border-style: solid; border-width: 1px"><font size="2">10</font></td>
		<td width="70" style="border-style: solid; border-width: 1px"><font size="2">40</font></td>
		<td style="border-style: solid; border-width: 1px"><font size="2">60</font></td>
	</tr>
</table>

[xhtmlcoder]

The only way you can style the cells with a thin 1px line (or line different from the default) is via CSS though obviously you could link to an external CSS file rather than adding it to each cell via the style attribute.

Also in markup the TABLE border attribute only uses 'pixel' units in the thus your border="0.6em" would be erroneous whereas border="1" wouldn't. As you can see CSS is the more flexible.

[Dez]

Thanks, this is for emails, so just wondering, could I put the css inline, without any external source ?

[Immerse]

Yes, that's the preferred method for emails. There are a lot of clients that ignore external CSS files (if not all) and many that ignore CSS you put in the header.

So for emails inline CSS = good.

[Dez]

Thanks - is there any way of styling all of the cells with just the styling for the table ?

[Immerse]

Unfortunately not, no. Email clients are fickle, you really need to specify the mark up on all elements. While most clients will propagate stuff like font names and sizes properly, the borders must be applied to each and every cell in your table.

It sucks, I know

Edit>>
You might be able to easy the suckiness of this situation a little by using shorthand, though:

<td width="57" style="border: 1px solid #000;">&nbsp;</td> 

[Stevie D]

Does <table border="1" cellspacing="1"> not give you what you need?

[Dez]

Does <table border="1" cellspacing="1"> not give you what you need?

That just makes a border around the whole table.

[Dez]

Unfortunately not, no. Email clients are fickle, you really need to specify the mark up on all elements. While most clients will propagate stuff like font names and sizes properly, the borders must be applied to each and every cell in your table.

It sucks, I know

Edit>>
You might be able to easy the suckiness of this situation a little by using shorthand, though:

<td width="57" style="border: 1px solid #000;">*</td> 

Thank you - that has worked, but the borders are quite thick, is there any way of getting thinner lines please?

[Stevie D]

That just makes a border around the whole table.

In what browser? Every time I've used it, it's drawn a border round each cell and round the whole table.

Thank you - that has worked, but the borders are quite thick, is there any way of getting thinner lines please?

The borders are 1px, that's the thinnest you can get! You might simulate a thinner line by making it grey rather than black, change #000 to #888 and see how that goes.

[deathshadow60]

Yeah, border="1" should be putting it around all cells, not just around the table -- unless you set something funky on the TD. As a rule of thumb IF you are going to use HTML in e-mails, (not that there's a legitimate reason for legitimate e-mails to have HTML in them) you probably shouldn't even be trying to use the STYLE attribute as it too is poorly supported.

BTW -- you should probably be using TH instead of TD+B, try adding the SCOPE attribute, and remember that cells inherit width off of the first TR's TD... News flash, there are more tags that go into tables than just TR and TD.

<table width="27%" cellspacing="1" border="1" cellpadding="0">
	<thead>
		<tr>
			<td width="57">&nbsp;</td>
			<th width="61" scope="col">Text</th>
			<th width="70" scope="col">Text</th>
			<th scope="col">Text</th>
		</tr>
	</thead><tbody>
		<tr>
			<th scope="row">Text</th>
			<td>30</td>
			<td>120</td>
			<td>180</td>
		</tr><tr>
			<th scope="row">Text</th>
			<td>15</td>
			<td>60</td>
			<td>90</td>
		</tr><tr>
			<th scope="row">Text</th>
			<td>10</td>
			<td>40</td>
			<td>60</td>
		</tr>
	</tbody>
</table>

Should be all you need. AGAIN, not that I'd be putting HTML into an e-mail -- since I use that as one of my spam filters.