Animated table borders in HTML?

Question

I am learning HTML and we have the assignment to get creative using tables and deprecated HTML attributes. I am creating a simple game board using tables and I would like to animate my table borders using a scrolling marquee attribute or something that will cause my table borders to scroll around like a Vegas lighted billboard. So far I have a basic 600x600px table with a 1px CSS styled dotted border. How can I make these dots scroll around my table in HTML or CSS? Where exactly do I place this code? I am using Dreamweaver to set this up.

Answer 1

Make an animated image with the borders you want and the center of the image transparent and the size of the table contents you need. Place the animated image as a background of a div container. Put your table contents inside the div and position it, if needed, to occupy the transparent portion of the animation.



Might even try making the animation as a background of the table. With proper padding, the contents can be made to be inside the transparent section with the animated "borders" .



Ron

Answer 2

Very complicated thing to do, you could use a 1px padding that has a background image repeated then use background-position to move the image to give a marquee effect, but this will require some JavaScript in order to be able to do it (EDIT: or a GIF can do the moving for you).



I suggest you use some CSS3 (not fully supported yet) and use border-image with an animated GIF file.

Answer 3

Create Your Own Animations - http://3dAnimationCartoons.com/?jLTn