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

Question

I'm surprised I couldn't find a solution to this. I would like to position a small table (1 row, 3 cells,) near the top of my document, aligned to the right, with a paragraph wrapping around it, just as you can do with 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 as well to be able to define padding around the table, so the text is not right up to the border. Is there a relatively simple solution for this in CSS?

Answer 1

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 2

Just float the table to the right (which is how you should be positioning the image as well):

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

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