Skipping rows in HTML Table

Question

I am trying to create HTML tables with desired result of

|----HTML PAGE----------------------|
|                                   |
|  ---Table-------------------------|
|  |   T     | Text      | Text     |
|  |   E     |----------------------|
|  |   X     | Image     | Image    |
|  |   T     |----------------------|
|  |         | Text      | Text     |
|  |         |-----------------------
|  |         | Image     | Image    |
|  |---------|-----------------------

But my the table isn't skipping the rows when I tried to add <td> before the text column. How do I skip column without adding rows or how do I make my table only display on the right side of the page?

<div>
    <table border="1" width="100%">
        <tbody>
            <tr>
                <td>Description</td>
            <tr>
                <th>MATH</th>
                <th>SCIENC</th>
            </tr>
            <tr>
                <td>
                    <form action="/" method="post">
                        <input type="image"src="<%=request.getContextPath()%>/css/categories/math.jpg">
                    </form>
                </td>
                <td>
                    <form action="/" method="post">
                        <input type="image" src="<%=request.getContextPath()%>/css/categories/science.jpg">
                    </form>
                </td>
                </tr>
            <tr>
                <th>PHYSIC</th>
                <th>ART</th>
            </tr>
            <tr>
                <td>
                    <form action="/" method="post">
                        <input type="image"src="<%=request.getContextPath()%>/css/categories/physic.jpg">
                    </form>
                </td>
                <td>
                    <form action="/" method="post">
                        <input type="image" src  <%=request.getContextPath()%>/css/categories/art.jpg">
                    </form>
                </td>
            </tr>
            </td>
            </tr>
            </tbody>
        </table>
    </div>

Answer 1

You can use the rowspan attribute: http://www.w3schools.com/tags/att_td_rowspan.asp

Answer 2

Use rowspan property.

<table>
<tr>
    <td ROWSPAN=4> table data 1</td>
    <td> text</td>
    <td> image</td>
</tr>
<tr>
    <td> text</td>
    <td> image</td>
</tr>
<tr>
    <td > text</td>
    <td> image</td>
</tr>
    <tr>
    <td> text</td>
    <td > image</td>
</tr>

check this jsfiddle