Align a table above an div - html

Question

I have an div container where an image is displayed, above that image I would like to show an table. So, my problem is that the table isn't displayed over the image. Instead it is shown after the image? Can somebody tell me how I can align the table above the image?
<div id="foto2">
<img src="foto2.jpg" class="bg"> <span class="oben">
<table>
<tr>
<td onclick="playAudio('test.mp3')">Hamdullah</td>
<td onclick="playAudio('test2.mp3')">Was?</td>
</tr>
<tr>
<td onclick="playAudio('test.mp3')">Penner</td>
<td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
</table>
</span>
</div>
And my css:
html, body {
margin: 0;
width: 100%;
height: 100%;
background-color:#00061c;
}
img.bg {
width: 100%;
}
.oben {
left: 0;
width: 100%;
}
#font-face {
font-family: "Hallo";
src: url(hallo.ttf);
}
table {
width:100%;
color:#FFF;
}
tr {
text-align:center;
}
td {
font-family: Hallo;
font-size: xx-large;
}

Answer 1

In order to see your table "above" ( I suppose you mean in the z axis.) so the image is displayed as a background of the table you can use 2 alternatives solutions
1) a background for your foto2 div.
2) an absolute positioned table
Alternative 1 : Background for your foto2 div.
I dont think you need that oben rule with a left property for a not positioned element (which actually wont work either). The span tag as well I will keep it out of the game unless you have a very particular reason for it...mmmm
This is the fiddle
This is the css for foto2 div. You may adjust the repeat and other properties at your will
#foto2 {
background:url( your image url here );
}
this is the html
<div id="foto2">
<table>
<tr>
<td onclick="playAudio('test.mp3')">Hamdullah</td>
<td onclick="playAudio('test2.mp3')">Was?</td>
</tr>
<tr>
<td onclick="playAudio('test.mp3')">Penner</td>
<td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
</table>
</div>
Alternative 2: Absolute positioned table
With this alternative you may use a full width image and not to be constrained by the table size. its your call which alternative to use
Your foto2 div should be relative positioned.Then....
table {
position:absolute;
top:0px;
width:100%;
color:#FFF;
}
And here the fiddle for the absolute table

Answer 2

Have you tried putting the image after the table, like?
</table>
<img src="foto2.jpg" class="bg" />
Or put it in the lowest row of the table like:
<tr>
<td onclick="playAudio('test.mp3')">Penner</td>
<td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
<tr>
<td><img src="foto2.jpg" class="bg"></td>
</tr>
</table>
By the way why are you using <span> and put the <table> inside it?

Answer 3

Try inserting it after the closing span tag
<div id="foto2">
<span class="oben">
<table>
<tr>
<td onclick="playAudio('test.mp3')">Hamdullah</td>
<td onclick="playAudio('test2.mp3')">Was?</td>
</tr>
<tr>
<td onclick="playAudio('test.mp3')">Penner</td>
<td onclick="playAudio('test2.mp3')">Heidefick</td>
</tr>
</table>
</span>
<img src="foto2.jpg" class="bg" />
</div>