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

Printable View

Jan 15, 2012, 07:14
Dez

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

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?

HTML Code:

<table width="27%" id="table1" cellspacing="1" border="0.6em" cellpadding="0"> <tr> <td width="57" style="border-style: solid; border-width: 1px"> </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>
Jan 15, 2012, 07:48
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.
Jan 15, 2012, 08:07
Dez

Thanks, this is for emails, so just wondering, could I put the css inline, without any external source ?
Jan 15, 2012, 08:24
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. :)
Jan 15, 2012, 08:29
Dez

Thanks - is there any way of styling all of the cells with just the styling for the table ?
Jan 15, 2012, 09:26
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:

PHP Code:

<td width="57" style="border: 1px solid #000;"> </td>
Jan 15, 2012, 09:40
Stevie D

Does <table border="1" cellspacing="1"> not give you what you need?
Jan 15, 2012, 10:35
Dez

Quote:

Originally Posted by Stevie D

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

That just makes a border around the whole table.
Jan 15, 2012, 10:36
Dez

Quote:

Originally Posted by 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:

PHP Code:

<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?
Jan 15, 2012, 11:26
Stevie D

Quote:

Originally Posted by Dez

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.

Quote:

Originally Posted by Dez

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.
Jan 17, 2012, 06:48
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.

Code:

<table width="27%" cellspacing="1" border="1" cellpadding="0"> <thead> <tr> <td width="57"> </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.