Question

我有一张桌子，并且我正确地合并了空白和图片，但是故事不想合并。下面是HTML

<table border="3">
      <tr>
       <td>title</td>
    <td>created by</td>
     </tr>
    <tr>
    <td>blank</td>
    <td rowspan="2">picture</td>
     </tr>
     <tr>
    <td>story</td>

     </tr>
    <tr>
    <td>story</td>
    <td>date</td>
     </tr>
    <tr>
    <td>story</td>
    <td rowspan="3">blank</td>
    </tr>
    <tr>
    <td>tags</td>
    </tr>
    <tr>
    <td>lar e</td>
 
      </tr>
      <tr>
    <td>material </td>
    <td>comments</td>
  </tr>
    </table>

我在第一个故事中添加了rowspan="3"，并删除了其他两个故事，但这没有用。我在做什么错了？

这就是我想要的。

+------------+------------+
| title      | created by |
+------------+------------+
| blank      |            |
+------------+ picture    |
|            |            |
+            +------------+
| story      | date       |
+            +------------+
|            |            |
+------------+            |
| tags       | blank      |
+------------+            |
| lar e      |            |
+------------+------------+
| material   | comments   |
+------------+------------+

Answer 1

您只需要一些具有rowpan的样式属性。检查以下代码

<table border=1>
      <tr>
       <td>title</td>
    <td>created by</td>
     </tr>
    <tr>
    <td>blank</td>
    <td rowspan="2">picture</td>
     </tr>
     <tr>
    <td rowspan="3" style="padding:20px 0px">story</td>

     </tr>
    <tr>
    
    <td>date</td>
     </tr>
    <tr>
    
    <td rowspan="3">blank</td>
    </tr>
    <tr>
    <td>tags</td>
    </tr>
    <tr>
    <td>lar e</td>
 
      </tr>
      <tr>
    <td>material </td>
    <td>comments</td>
  </tr>
    </table>

Answer 2

尝试

<table style="border: 1px solid">
        <tr>
            <td style="border: 1px solid">title</td>
            <td style="border: 1px solid">created by</td>
        </tr>
        <tr>
            <td style="border: 1px solid">blank</td>
            <td rowspan="2" style="border: 1px solid">picture</td>
        </tr>
        <tr>
            <td style="border: 1px solid">story</td>
        </tr>
        <tr>
            <td style="border: 1px solid">story</td>
            <td style="border: 1px solid">date</td>
        </tr>
        <tr>
            <td style="border: 1px solid">story</td>
            <td rowspan="3" style="border: 1px solid">blank</td>
        </tr>
        <tr>
            <td style="border: 1px solid">tags</td>
        </tr>
        <tr>
            <td style="border: 1px solid">lar e</td>
        </tr>
        <tr>
            <td style="border: 1px solid">material </td>
            <td style="border: 1px solid">comments</td>
        </tr>
    </table>

Answer 3

您缺少闭合的表格行和表格标签，但是在添加边框以直观地看到布局后，看来您的布局是正确的。

table  { border-collapse:collapse }
td { border: solid 1px black }

<table>
    <tr>
        <td>title</td>
        <td>created by</td>
    </tr>
    <tr>
        <td>blank</td>
        <td rowspan="2">picture</td>
    </tr>
    <tr>
        <td rowspan="3" style="padding: 50px 0">story</td>
    </tr>
    <tr>
        <td>date</td>
    </tr>
    <tr>
        <td rowspan="3">blank</td>
    </tr>
    <tr>
        <td>tags</td>
    </tr>
    <tr>
        <td>lar e</td>
    </tr>
    <tr>
        <td>material</td>
        <td>comments</td>
    </tr>
</table>

为什么我的HTML表格无法正常工作？

3 个答案: