为什么我的 html 表格无法正常工作?

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

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

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