Add a table over an image

Get Started
1

I have a table with three images, its codes are:

<tr>
<td><a href=“/”><IMG SRC=“images/bannerlogo.jpg” alt=“logo” width=“250” height=“57” border=“0”></a></td>
<td rowspan=“2”><IMG SRC=“images/bannermid.jpg” alt=“Header” width=“249” height=“113”></td>
<td rowspan=“2”><img src=“images/bannerright.jpg” alt=“Header” width=“250” height=“113”>
</td>
</tr>

Now I want to put a tiny table over the third image, that is images/bannerright.jpg, so I try to rewrite by using div tag:

<tr>
<td><a href=“/”><IMG SRC=“images/bannerlogo.jpg” alt=“logo” width=“250” height=“57” border=“0”></a></td>
<td rowspan=“2”><IMG SRC=“images/bannermid.jpg” alt=“Header” width=“249” height=“113”></td>
<td rowspan=“2”>
<div style=“position:relative;”>
<img src=“images/bannerright.jpg” alt=“Header” width=“250” height=“113”>
<div style=“width:200px; height:200px; position:absolute; top:10px; left:10px;”>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</div>
</div>
</td>

</tr>

but this totally distort the layout at all. What is the problem with my codes?

2

Hi shuling. Welcome to the forums. :slight_smile:

The first question to be asking here is why you are using tables for this? Tables are not the right tool for page layouts like this. If you post a screen shot fo what you are aiming for, we could suggest better ways to do this. :slight_smile:

3

Thank you.

I just want to add the social buttons, such as facebook like button, google + button, LinkedIn button over the images/bannerright.jpg. So I think create a table(one row and 3 columens) over the image and then add the buttons into the table is a convenient way.

4

Tables are not the right tool for layout any more. As I say, post a screen shot and we’ll suggest a better way. I would create a div with a background image, and in that div have a simple list of links. Much easier and better code. :slight_smile:

5

Sure. Please see the attached image. Originally we have three images tiled as images/bannerlogo.jpg, images/bannermid.jpg and images/bannerright.jpg, now we want to add four social buttons over the bannerright.jpg. So I want to use div and put a small table(one row and four columns) over it.

6

You are still locked into table mode, though. Tables have no place in any of this.

Firstly, have one container div for that whole section, and put one background image on it, rather than three separate images.

Then one option is to give that container position: relative. Then place the social buttons into an unordered list. Give that UL position: absolute, and place it in the bottom right corner of the container. Float the LIs so that they sit horizontally. That’s a much neater and simpler way to do this layout.

Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>header</title>
	
<style media="all">
.header {width: 900px; height: 200px; background: #e7e7e7 url(bgimage.jpg); margin: 0 auto; position: relative;}
.header ul {list-style: none; position: absolute; right: 20px; bottom: 10px; margin: 0;}
.header li {float: left; margin-left: 20px;}
</style>
	
</head>
<body>

<div class="header">
	<ul>
		<li><a href=""><img src="" width="40" height="40"></a></li>
		<li><a href=""><img src="" width="40" height="40"></a></li>
		<li><a href=""><img src="" width="40" height="40"></a></li>
		<li><a href=""><img src="" width="40" height="40"></a></li>
	</ul>
</div>

</body>
</html>