Html 如何在2个单元格上显示文本？

我有一个表，有一行和两个单元格。 每个单元格都有自己的背景图像。 我需要能够显示一些相对于整个表格居中的文本，这意味着它将显示在两个表格单元格上

像这样：

<table style="position:absolute; left: 100px; top:100px; width:400px; z-index:1; ">
<tr>
<td style="width: 200px; height: 200px; background-image: url('http://www.hdofwallpapers.com/wp-content/uploads/2013/11/Opera-Background.jpg')"></td>
<td style="width: 200px; height: 200px; background-image: url('http://www.hdofwallpapers.com/wp-content/uploads/2013/11/Opera-Background.jpg')"></td>
</tr>
</table>
<div style="color:#ffffff; position: absolute; left: 100px; top: 200px; text-align: center; width:400px; height:200px; vertical-align:middle; z-index:2">
sadf asfasdf asfd d
</div>

或者理想情况下：

---

您可以使用Colspan/Rowspan创建跨多行/多列的单元格。但它将是一个单一的细胞和一个单一的背景图像以及

看看这个例子“

编辑：您添加了一个新示例，清楚地表明colspan无法解决问题：

看看这个问题的答案

---

它包括一个类似解决方案的代码，该解决方案使用位于彼此顶部的DIV元素

一个非常原始的解决方案如下所示：

<table style="position:absolute; left: 100px; top:100px; width:400px; z-index:1; ">
<tr>
<td style="width: 200px; height: 200px; background-image: url('http://www.hdofwallpapers.com/wp-content/uploads/2013/11/Opera-Background.jpg')"></td>
<td style="width: 200px; height: 200px; background-image: url('http://www.hdofwallpapers.com/wp-content/uploads/2013/11/Opera-Background.jpg')"></td>
</tr>
</table>
<div style="color:#ffffff; position: absolute; left: 100px; top: 200px; text-align: center; width:400px; height:200px; vertical-align:middle; z-index:2">
sadf asfasdf asfd d
</div>

sadf asfasdf asfd d

您的一些代码会很好，我想知道'colspan='2'是否有用。对于上面添加的示例，colspan将没有帮助。