html - 画像のようにテキストをテーブルの周りに折り返す方法

Question

これに対する解決策を見つけることができなかったことに驚いています。次のコードで画像を処理するのと同じように、小さなテーブル (1 行、3 セル) をドキュメントの上部近くに配置し、右に揃えて段落で囲みます...

    <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...

テーブルの周囲にパディングを定義できるとよいので、テキストが境界線に達しません。CSSでこれに対する比較的簡単な解決策はありますか?

Answer 1

テーブルを右にフロートするだけです (画像も同様に配置する必要があります)。

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

デモ: 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

テーブルを右にフロートさせ、CSSを介してマージンを与えます。

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

jsFiddleの例。