Custom table borders... *fairly* urgent - Programmers Heaven

Howdy, Stranger!

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

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

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)

Mike

Comments

  • WeirdofreakWeirdofreak Posts: 439Member
    [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.
    ^D
    $ shameless-plug
    http://line-ed.sourceforge.net



  • mwronskimwronski Posts: 62Member
    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 )

  • mwronskimwronski Posts: 62Member
    I decided to use the simple 2-border approach.
    image


    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.
  • mwronskimwronski Posts: 62Member
    I feel stupid for replying to myself, but I think I have it...
    image



    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.