Adding an image as a table border

[traaacker]

Hello, recently I am trying to get into css because everyone insists I need to if I want to stay current with the times.

I can do a few simple things in css, but for the life of me, I can not figure out how to get a small image to tile across a table's border.

For example, I made two images, one for the vertical borders, and another for the horizontal borders. So I want these to tile across just my html borders (not the cells). This would spice them up more than the generic (yuk) feel.

I've been finding bits of things here and there the last few days, but nothing concrete.

[doodlebee]

can we see some code?

[traaacker]

Well nothing much to show since it is pretty much generic, but I just drafted up a sample table right now:

<table width="80%" height="149" border="1">
<tr>
<td>This is cell #1</td>
<td>This is cell #2</td>
</tr>
</table>

[daosmith]

AFAIK, there isn't a simple way to achieve what you want. You would probably have to enclose the <table> in a couple of presentational <div> elements - one which has the vertical border image tiled and the other the horizontal image. Some example css:

div.vert_border {

padding: 5px 0px;
background-image: url('vert_border.jpg');

}

div.hoz_border {

padding: 0px 5px;
background-image: url('hoz_border.jpg');

}

table { background-color: #ffffff; }

The padding values obviously need to be adjusted to match the width/height of the background images. The background colour of the <table> should be set to match your page background color.

This is a pretty clumsy solution: it's probably better (if less interesting) just to stick with the regular CSS border properties.

[doodlebee]

Okay, I see. Well, what I would do in this case is create a div to encompass the table. We'll say - for purposes of example - that the table is 200px x 200px. The image you want to "tile" and make as your border is 5px x 5px.

So, the HTML would be something like so:

<div id="border">
<table>
<tr><td>
stuff here
</td></tr>
</table>
</div>

Your CSS would be something like so:

#border {
width:200px;
padding:5px;
background:url("image.jpg");
}
table {
border:none;
width:200px;
background:#FFF;
}

Now, this is very basic. But what it does is tile the image throughout the entire div. The padding sets the table 5 pixels (the size of your image) just enough inside that you will see *one* row of your image all around your table. The table background is set to "white" so it covers the rest of the tiled image within the div.

NOTE: Firefox, Opera and others will see the div width as 200 pixels wide, and add in the padding of 5px. IE, however, will *not* push the div width wider, so you'll need a conditional comment to make the width 210px wide for IE browsers - otherwise your div will be exactly the same size as your table, and won't expose the "border" around it. Of course, it could be the other way around - I always forget which way that goes! (sorry!)

This is the simplest way I would think to do it, but you may have to mess with the CSS a bit to get it to function exactly the way you want it to.

Hope it helps :)

[traaacker]

Well I did try a new trick, though it didnt work as it should have. I made a table with 6 cells. I figured I'd add in a css function which tiles my image on the x, and another on the y. I then applied these to the top/bottom, and left/right cells. This actally works.

Now the part where things start going wrong is, I adjusted the center cell to 100%, which in theory (as shown in videos) will cause the other cells to collaps. This is because the center cell at 100% size will expand all availalbe space. But for some reason, the border cells don't collaps. I wonder if this is a dreamweaver bug or something. So my borders while tiling correctly in their proper directions are not really connecting, but jarbled. I'm puzzled at this behaviour.

[traaacker]

Ok my bad, if there is one cell in a h or v row that isn't exactly set to 0% that skews things off. I got it working now.. Phew.. Thanks for the feedback guys.