Dotted Lines For Table Borders

  The Paul 14:54 08 Sep 2005

If you take a look at this site click here you will see that they have produced the tables inner borders as dotted lines.

The question, therefore, is "how do they achieve this".

  genuinefake 15:24 08 Sep 2005

the dotted line that you see is just a single dot repeated many times...

  genuinefake 15:26 08 Sep 2005

actually its two dots, one horizontal and one vertical, in .gif formats.

  The Paul 15:33 08 Sep 2005

Does this mean that the lines on this particular site are not actual table borders but, in fact, they are lelements within the table itself. As you say - .gif format.

Or have I gone AWOL again.

  genuinefake 15:34 08 Sep 2005

i believe so. You can have dotted lines for tables using css click here

  Forum Editor 19:08 08 Sep 2005

It's a Flash site, and the dotted lines are .gif images.

  The Paul 19:51 08 Sep 2005

Thanks FE - sadly, this is over my head. I'll think of something else instead.

Cheers guys for your input.

  Taran 05:17 09 Sep 2005

Dump this code into a new HTML document, between the <body></body> tags:

<table width="500" border="0" align="center" cellpadding="10" cellspacing="0" style="border:2px dotted #000066; ">

<table width="100%" border="0" cellspacing="0" cellpadding="5" style="border:2px dotted #000066;" >
<td> </td>


It's clumsy, but serves to illustrate a point.

Basically the first table is fixed width with a 10 pixel cell padding.

The inner table is set to 100% width, which fills all of the available space inside the first table less the 10 pixel padding.

Both tables are styled within the table code tags, which is horribly innefficient, but it does allow you to see what is going on.

style="border:2px dotted #000066;" breaks down as follows:

style= tells the browser to render whatever is between the quotes as CSS styled content.

border: tells the browser that the style applies to the border (sorry if this seems obvious - I'm just trying to be thorough).

The rest is the bit you need to be concerned with, and it works in this order:




So, style="border:2px dotted #000066;" actually means apply a CSS border style of 2 pixels (2px), make the border dotted (you can also use solid, dashed and all kinds of other options) and make it #000066 colour.

I prefer an externally referenced stylesheet but managing border effects can sometimes prove inconvenient unless you have a string grip on CSS, so this is where including the styling in the table code can be useful and that is why I gave the above example.

You could also use border-left, border-right, border-top and border-bottom for absolute control over table content, and if you really want to get adventurous get rid of the table entirely and wrap all of your content into a series of <div> tags.

It should give you some ideas.


  The Paul 15:05 09 Sep 2005

Good for you kind one.

I'm off to do this now. Wish me luck.

Cheers All.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Alienware 17 R4 2017 review

Interview: Camille Walala on her giant 3D installation inspired by childhood funfair visits

Best iPad buying guide 2017

Où regarder le British Open 2017 ?