How do I wrap a table around an image?

Question

Using only HTML and CSS, is there a way to accomplish this:

The cow image is floating to the right.

How can I get the table to properly wrap around the cow image? I've only managed to get something like this:

You can't. The spec does not allow for this sort of behavior. — cimmanon, Nov 03 '13 at 18:49
That's why modern web developers use div's; they're more dynamic (other advantages of using divs over tables: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1) — Joren, Nov 03 '13 at 18:50
Though using css/divs is typical, common, and accepted practice nowadays, there are still many valid reasons to use tables. Which is why sites like http://amazon.com still use them. Not saying they are interchangeable, but that they both serve certain purposes and tables sometimes serve it much more effectively. — FiLeVeR10, Nov 03 '13 at 19:11

score 3 · Answer 1 · answered Nov 03 '13 at 19:02

3

You could work with two tables and set the upper table to, e.g. width: 50%; and the bottom one to 100%.

Check out my fiddle: http://jsfiddle.net/KuGES/

Please note: this is really bad practice! Use DIV's instead!!

enter image description here

answered Nov 03 '13 at 19:02

Charles Ingalls

4,521
5
25
33

score 2 · Answer 2 · answered Nov 03 '13 at 18:58

You could achieve it by expanding the table.

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <td colspan="2"><h1>Title Goes Here</h1></td>
        <td rowspan="3"><img height="200" src="http://pureblissnutrition.files.wordpress.com/2010/01/1238813_26934058.jpg"/></td>
    </tr>
    <tr>
        <td>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</td>
        <td>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</td>
    </tr>
    <tr>
        <td>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</td>
        <td>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</td>
    </tr>
    <tr>
        <td>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</td>
        <td colspan="2">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</td>
    </tr>
    <tr>
        <td>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</td>
        <td colspan="2">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</td>
    </tr>
</table>

Made a fiddle: http://jsfiddle.net/filever10/9n7d3/

How do I wrap a table around an image?

2 Answers2