How can I show text and a picture in an ordered list?

Question

I need to create an ordered list, which has text and pictures.

i.e.

To do this, I have put the text and images in tables.

<ol>
    <li>
        <table>
            <tr>
                <td>
                    Tyrannasaurus
                </td>
             </tr>
             <tr>
                <td>
                    <img style="float: left; margin-top: 5px;" src="Tyrannasaurus.png" />
                </td>
            </tr>
        </table>
    </li>
    <li>
        <table>
            <tr>
                <td>
                    Brontosaurus
                </td>
             </tr>
             <tr>
                <td>
                    <img style="float: left; margin-top: 5px;" src="Brontosaurus.png" />
                </td>
            </tr>
        </table>
    </li>
    <li>
        <table>
            <tr>
                <td>
                    Triceratops
                </td>
             </tr>
             <tr>
                <td>
                    <img style="float: left; margin-top: 5px;" src="Triceratops.png" />
                </td>
            </tr>
        </table>
    </li>
</ol>

However, the problem now is that the numbers don't actually line up with the text- the numbers are too high.

Is there a better method I should be using? It doesn't seem like it should be so hard.

Answer 1

You can just use something like this:

<ol>
    <li>
        <h3>Animal 1</h3>
        <img src="http://lorempixel.com/400/200/animals/1/" alt="">
    </li>
    <li>
        <h3>Animal 2</h3>
        <img src="http://lorempixel.com/400/200/animals/2/" alt="">
    </li>
    <li>
        <h3>Animal 3</h3>
        <img src="http://lorempixel.com/400/200/animals/3/" alt="">
    </li>
</ol>

The above code looks this way:

Fiddle: http://jsfiddle.net/praveenscience/gxqnbv7r/