css - 画像を表で囲むにはどうすればよいですか?

Question

HTMLとCSSのみを使用して、これを達成する方法はありますか:

牛の像が右に浮いています。

テーブルが牛の画像を適切に囲むようにするにはどうすればよいですか? 私はこのようなものを得ることができただけです:

Answer 1

たとえば、2 つのテーブルを使用して、上のテーブルを 100% に設定し、下のテーブルwidth: 50%;を 100% に設定することができます。

私のフィドルをチェックしてください: http://jsfiddle.net/KuGES/

注意: これは本当に悪い習慣です! 代わりに DIV を使用してください!!

Answer 2

テーブルを拡張することでそれを達成できます。

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

フィドルを作った：http://jsfiddle.net/filever10/9n7d3/