How to make text wrapping around a table as if it were an image

Question

I am surprised that I could not find a solution. I would like to place a small table (1 row, 3 cells) at the top of my document, aligned to the right, with a paragraph wrapped around it, just like you can make an image with the following code ...

<img src="http://www.sorenwagner.ws/marty/img/ca-seal.jpg" align="right" width="300" height="100"> This is a paragraph large enough to wrap around the image... This is a paragraph large enough to wrap around the image... This is a paragraph large enough to wrap around the image... This is a paragraph large enough to wrap around the image... 

It would be nice if you could specify a registration around the table, so the text does not match the border. Is there a relatively simple solution for this in CSS?

Answer 1

Just a float table on the right (this is how you should position the image):

 <table style="float: right"> <!-- ... --> </table> <p>Bunch of text...</p> 

Demo: http://jsfiddle.net/ambiguous/ZLfg7/1/

Answer 2

jsFiddle

 table { float: right; /* floats the table to the right, allowing text to wrap around it */ margin: 12px; /* adds buffer space around the table */ } 

Answer 3

Put the table to the right and give it a field through CSS:

 table { float:right; width:300px; margin:0 0 10px 10px; }​ 

JsFiddle example .