SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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">&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>

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, this is for emails, so just wondering, could I put the css inline, without any external source ?

  4. #4
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    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.

  5. #5
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - is there any way of styling all of the cells with just the styling for the table ?

  6. #6
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    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;">&nbsp;</td

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Does <table border="1" cellspacing="1"> not give you what you need?

  8. #8
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Does <table border="1" cellspacing="1"> not give you what you need?
    That just makes a border around the whole table.

  9. #9
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Immerse View Post
    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?

  10. #10
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dez View Post
    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 View Post
    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.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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">&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.


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
  •