Putting Your Listing in a Table With Borders

Okay, you've got some pictures and you've got some text. You've probably got some other stuff, too, and it's all kind of there, not in a neat box like so many of the other listings you see. The pictures are in the center, but the text goes from one edge of the window to the other.

Here's the "listing" I'm going to be putting into a table for you. Keep in mind that the code will be somewhat different here than on Niteflirt. So I'll give you the code you will need, and I'll show you how it will look.

My Sample Listing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nunc. Nam metus risus, consequat ut, sollicitudin ullamcorper, tempor sed, nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean elementum. Donec massa mi, accumsan ut, eleifend at, aliquam at, purus. Quisque cursus posuere mauris. Fusce cursus suscipit nulla. Vivamus vitae turpis aliquet diam cursus mollis. Etiam sed nibh vitae mi fringilla semper. Etiam sed tortor. Fusce nec mi. Praesent mi pede, accumsan ac, rhoncus quis, aliquam a, eros.

Maecenas nonummy, sem a bibendum nonummy, est eros elementum velit, non cursus nunc sem ut enim. Sed eleifend. Morbi arcu arcu, dictum vel, fringilla quis, ultricies nec, lorem. Cras pellentesque arcu molestie massa. In ante. Nam nec magna nec massa dapibus egestas. Mauris imperdiet sagittis turpis. Mauris nec ante. Etiam commodo quam vitae dui. Ut sem augue, eleifend eget, viverra a, molestie nec, eros. Sed mauris diam, vulputate sit amet, faucibus iaculis, pellentesque nec, purus. Praesent eget orci. Duis quam felis, mattis vitae, aliquam eu, varius vel, urna.

Vivamus et purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed porttitor elit et orci. Vivamus imperdiet sagittis augue. Sed id elit. Nam fermentum dui at ante. Ut ipsum massa, viverra sit amet, sagittis et, semper eu, tellus. Donec eu elit. Nullam neque turpis, cursus id, hendrerit id, convallis ac, libero. Sed semper, dolor ut pulvinar suscipit, ante dui gravida nulla, ut facilisis eros orci at ipsum. Suspendisse metus tellus, porta dapibus, vulputate id, suscipit vel, erat. Praesent bibendum iaculis dui. Sed lobortis, nisl quis lobortis bibendum, mi enim bibendum nulla, sit amet mollis sapien dui et lorem. Vivamus vitae dui. Mauris imperdiet congue erat. Nam nisl diam, faucibus nec, porta vel, sollicitudin eu, ipsum. Phasellus rutrum interdum felis. Maecenas interdum, dui ut consectetuer egestas, velit metus tristique lacus, in sodales velit nisl volutpat pede. Proin dapibus ante sit amet lacus. Nunc neque libero, porta eget, semper porttitor, tincidunt non, pede.

Step #1

First we will put a single cell table around it�one row, one column, no border, but a width of 650 pixels, centered in the page. Watch what happens to the width of the text.

My Sample Listing

Step #2

Now we will give it a 2 pixel black border. We do this by nesting another table around it with a black background and cellpadding of 2 pixels. The original table now needs a background color, or it will end up completely black. We'll give it the color "#fbdffb", a pale pink. We'll also give the inside table a cellpadding of 10 pixels, so the text doesn't touch the black border, but instead has a comfortable margin. It's starting to look like a listing.

My Sample Listing

Step #2

Now I'll just add an image background to the page by putting
<body background="http://location of your image">
at the top of the listing.

My Sample Listing

Back to tutorials