9

I have a table with 1 row and two cells. Each cell has its own background image. I need to be able to display some text that will be centered in relation to the entire table, meaning that it will appear to be displayed over both table cells.

like this:

enter image description here

Or ideally:

enter image description here

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Maysam
  • 523
  • 4
  • 16

2 Answers2

4

You can use Colspan / Rowspan to create a cell that spans over multiple rows / multiple columns. But it will be a single cell with a single background image as well.

Take a look at this example 'http://www.angelfire.com/fl5/html-tutorial/tables/colspan.htm'

EDIT: You added a new example that clearly shows that colspan will not solve the problem:

Take a look at the answers to this question Invert CSS font-color depending on background-color It includes code for a similar solution using DIV elements positioned ontop of each other

Community
  • 1
  • 1
odedsh
  • 2,594
  • 17
  • 17
2

One very primitive solution to this goes like this:

<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>
netfed
  • 602
  • 8
  • 18