CODEWITHSUNDEEP
htmlcsshtml-table
pigymunk
pigymunk

Reputation: 15

How can I get rid of a large space between cells?

I have a website, http://pigymunk.co.uk, and as you can see, the table has some fault where there's a a large gap between 2 cells. Can anyone help find that fault?

<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
   <td><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style="align:"middle"/></td>
   </tr>
<tr>
   <td><a href="http://pigymunk.co.uk/?page_id=2" target="_self"><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/></a>    </td>
   <td><a href="http://pigymunk.co.uk/?page_id=76" target="_self"><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></a></td>

Upvotes: 0

Views: 201

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

Quick fix: change the first <td> to <td colspan="4">.

Your table has one cell in the first row, four cells in the second row. This violates the HTML table model principles, so all bets are off. What happens in practice is what you see here: the first cell (the large image) is treated as belonging to the first column only.

This can be seen e.g. in Firefox Web Developer Extension, which has a function for drawing borders around all cells.

Upvotes: 1

j08691
j08691

Reputation: 207861

You can change the colspan attribute of your first cell to span the other columns. Note the cell that has <td colspan="4">. Try this:

<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
   <td colspan="4"><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style=" align:"middle"/></td>
</tr>
<tr>
   <td><a href="http://pigymunk.co.uk/?page_id=2" target="_self"><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/></a></td>
   <td><a href="http://pigymunk.co.uk/?page_id=76" target="_self"><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></a></td>
   <td><a href="http://facebook.com/jackweatherilt" target="_self"><img src="http://www.pigymunk.co.uk/Faceb%20icon.png" alt="Facebook" align:"middle"/></a></td>
   <td><a href="http://pigymunk.co.uk/distractions" target="_self"><img src="http://www.pigymunk.co.uk/distractions.png" alt="Demos" align:"middle"/></a></td>
</tr>
</table>

jsFiddle example.

And just as a side note, you may want to look into updating your code and getting rid of deprecated attributes like align="center" and inline CSS among other things.

Upvotes: 1

Related Questions