How can I create a table like the above example in HTML and CSS. I've tried the following:
如何在HTML和CSS中创建类似上面示例的表。我尝试过以下方法:
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td style="width:100%">TEXT</td>
</tr>
but it won't work. Can anyone help?
但它不会起作用。有人可以帮忙吗?
2 个解决方案
#1
81
You should use colspan
for your second row. Like this :
您应该使用colspan作为第二行。喜欢这个 :
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td colspan="2" style="width:100%">TEXT</td>
</tr>
...
</table>
For learn -> HTML Colspan
学习 - > HTML Colspan
#2
13
<td>
s have a colspan
attribute that determine how many columns it should span over. You example has 2 columns to span, so your cleaned up code would look like this:
有一个colspan属性,用于确定应跨越多少列。您的示例有2列要跨越,因此清理后的代码如下所示:
<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<!-- The important part is here -->
<td colspan="2">This will have 100% width by default</td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
#1
81
You should use colspan
for your second row. Like this :
您应该使用colspan作为第二行。喜欢这个 :
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td colspan="2" style="width:100%">TEXT</td>
</tr>
...
</table>
For learn -> HTML Colspan
学习 - > HTML Colspan
#2
13
<td>
s have a colspan
attribute that determine how many columns it should span over. You example has 2 columns to span, so your cleaned up code would look like this:
有一个colspan属性,用于确定应跨越多少列。您的示例有2列要跨越,因此清理后的代码如下所示:
<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<!-- The important part is here -->
<td colspan="2">This will have 100% width by default</td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>