Custom table borders... *fairly* urgent

I am a web developer and my boss wants me to make table borders look like "torn paper" intead of the usual drab black lines. I was thinking I can have a picture of torn paper for each of the edges and somehow apply it to the table, but I am not sure how. Any help?

Oh and the tables of course have different sizes. ( They are normal html s)



  • [b][red]This message was edited by Weirdofreak at 2005-1-11 10:30:45[/red][/b][hr]
    There's currently no easy way to do this. CSS3 will introduce the border-image property which should do the trick, but that's no good right now.

    The easiest way would probably be to embed tables - have it three by three and give each of the outer ones a background-image and either width or height, or in the case of the corner ones, both. It doesn't make your code any nicer (which to a few people seems to be all that matters, oddly), but it's simple and it works.
    $ shameless-plug

  • Thanks but I am not sure whether this method suits me. I was initially thinking of making an absolute positioning of the pictures and placing them in line with the table border (of course the border itself not being shown). My last resort will be just to make the torn paper image on the top and bottom of the table, directly above and below respectively. This will create a custom border on only 2 sides however, but it might work.

    btw Thanks for the Iframe advice it actually worked! (You would think there should be a simpler and neater-looking method for doing something like that :P )

  • I decided to use the simple 2-border approach.

    I blended the images with the background picture of the table so it creates a smooth transition and looks pretty good. The only problem is, there is some white space between the end of the first image and the beginning of the table. How would I make the image exactly touch the table? It seems simple but I just don't know :(

    I cant use absolute positioning because my table is ed and so in a higher resolution the picture will be positioned wrongly etc.
  • I feel stupid for replying to myself, but I think I have it...

    IMG.imgClass { vertical-align: -50%; }

    This seems to work! It forces the image to drop so it covers part of the top of the table, thereby removing the whitespace...

    If theres a better way, please say so.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!