Dotted Lines For Table Borders

  The Paul 14:54 08 Sep 05
Locked

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 05

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

  genuinefake 15:26 08 Sep 05

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

  The Paul 15:33 08 Sep 05

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 05

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

  Forum Editor 19:08 08 Sep 05

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

  The Paul 19:51 08 Sep 05

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

Cheers guys for your input.
Paul

  Taran 05:17 09 Sep 05

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; ">
<tr>
<td>

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

</td>
</tr>
</table>

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:

width

type

colour

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.

T

  The Paul 15:05 09 Sep 05

Good for you kind one.

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

Cheers All.
Paul

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

Samsung Galaxy Book review: Hands-on with Samsung’s high-end hybrid

1995-2015: How technology has changed the world in 20 years

This is probably one of the best bank ads we’ve seen

Apple Watch 2 vs Huawei Watch 2 comparison review: watch out for 4G smartwatches Apple