Question

我正在尝试创建具有所需

结果的HTML表格

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

但是当我尝试在文本列之前添加<td>时，我的表并没有跳过行。如何在不添加行的情况下跳过列，或者如何使我的表仅显示在页面的右侧？

<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

使用 rowspan 属性。

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

检查此jsfiddle

Answer 2

您可以使用rowspan属性： http://www.w3schools.com/tags/att_td_rowspan.asp

在HTML表中跳过行

2 个答案: