如何使文本环绕表格，就像它是一张图片一样。

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中是否有相对简单的解决方案？

- Soren Wagner

---

由于您的问题已经得到三个不同回答的充分解答，因此根据礼节，选择一个答案是恰当的，这样其他用户在将来引用问题时就不会看到它被标记为“未回答”。 - user110857

Answer 1

只需将表格向右浮动（这也是您应该定位图像的方式）：

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

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

- mu is too short

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 */
}

- user110857

Answer 3

通过CSS将表格向右浮动并给它添加外边距：

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

jsFiddle example.

- j08691

---

OP要求表格与其父元素之间有间隔。margin:0 0 10px 10px仅将间隔应用于表格的底部和左侧。 - user110857

@gmeben - 实际上，OP说：“定义表格周围的填充区域也很好，这样文本就不会紧贴边框。”我在我的示例中已经做到了。此外，更改边距的数量是微不足道的。 - j08691