Wrapping Text Around a Table

posted Nov 3, 2008, 12:08 PM by Brian Johnson   [ updated Jan 27, 2010, 8:05 PM by Brian Johnson ]


image caption (1x1 table)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse cursus fringilla diam. Proin urna sapien, aliquam in, consectetuer sit amet, aliquam ut, nibh. Suspendisse dolor est, aliquet quis, mattis ac, malesuada id, tellus. Suspendisse in velit. Praesent at arcu eget magna eleifend pretium. Integer vehicula. Maecenas metus. Sed accumsan eros dictum lacus ornare mollis. Donec fermentum ligula id dui. Ut ac lectus et orci dapibus consectetuer. Sed commodo malesuada nisi.

In hac habitasse platea dictumst. Vivamus pede dui, mollis a, tempus vel, fermentum sed, arcu. Quisque felis. Donec diam augue, venenatis eget, vehicula eget, aliquam et, neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vulputate justo ac tortor. Proin tincidunt rhoncus massa. Morbi mauris. Sed lobortis turpis a sapien. Integer sagittis, ipsum eu blandit ultrices, libero libero gravida arcu, non malesuada massa lacus in massa. Fusce vulputate neque sed metus aliquet interdum.

Sed consectetuer lacinia tellus. Ut vehicula velit a neque. Sed mi quam, dignissim et, iaculis quis, venenatis sit amet, tortor. Vestibulum egestas. Nulla tortor libero, volutpat at, lacinia vitae, accumsan sit amet, odio. Etiam semper sapien scelerisque pede. Proin diam velit, sagittis eu, congue a, dictum non, libero. Nunc eget diam. Sed sagittis mi sit amet odio. Suspendisse et leo.


How's it done?

The above wrapping effect was done by simply placing the "align=left" property into the <table....> tag for the image.  I've also removed the border for this example and added a slight padding to the cells (cellpadding="5") to expand the space between the image and the paragraph text.

The full <table....> tag is as follows:

<table style="border-color: rgb(136, 136, 136); border-width: 0px; border-collapse: collapse; text-align: center;" align="left" bordercolor="#888888" cellpadding="5" cellspacing="0">

Other Resources


Have a question, but don't know where to start?  Check out the Google Sites FAQ!