CODEWITHSUNDEEP
htmlcsshtml-table
asdftestonly
asdftestonly

Reputation: 21

how to remove the whitespace around images in a table

So I want to remove the extra spaces highlighted in red ink shown here: https://i.sstatic.net/d7Kwo.png

When I remove the top images the table width becomes correct: 800px

but what I wanted is this:https://i.sstatic.net/XPsz2.jpg

Here is my current code:

<html>
<head><title>Adventure</title>
<link rel="stylesheet" type="text/css" href="STYLE04.css">
</head>
<body>
<table style="width:800px; height:600px" >
    <tr>
    <td colspan=3><img src="N13BANNER.PNG"></td>
    <td><img src="N13LOGO.PNG"></td>
</tr>
<tr>
    <td style="width:176px"><img src="N13BUTTON1.PNG"></td>
    <td width=176><img src="N13IMG5.jpg"></td>
    <td colspan=2 rowspan=6><img src="DUNE204.jpg"></td>
</tr>
<tr>
    <td width=176><img src="N13BUTTON2.PNG"></td>
    <td width=176><img src="N13IMG1.jpg"></td>
</tr>
<tr>
    <td width=176><img src="N13BUTTON3.PNG"></td>
    <td width=176><img src="N13IMG4.jpg"></td>
</tr>
<tr>
    <td width=176><img src="N13BUTTON4.PNG"></td>
    <td width=176><img src="N13IMG9.jpg"></td>
</tr>
<tr>
    <td width=176><a href="mailto:[email protected]?Subject=Adventure%20Me%20Up..."><img src="N13BUTTON5.PNG"></a></td>
    <td width=176><a href="mailto:[email protected]?Subject=Adventure%20Me%20Up..."><img src="N13IMG6.jpg"></a></td>
</tr>
<tr>
    <td colspan=2><h1>Webpage last edited by asdf</h1></td>
</tr>
</table>
</body>
</html>

Upvotes: 2

Views: 76

Answers (1)

Asons
Asons

Reputation: 87313

Code sample, with an update of your table layout without the images.

Is this how you want? ... then your images is to big, and pushes the cells too wide.

table {
  width: 800px;
}
td {
  background-color: gray;
  width: 20%;
  height: 85px;
}
tr:last-child td {
  height: 40px;
}
img {
  vertical-align: top;
}
<table>
<tr>
    <td colspan=4></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td colspan=3 rowspan=6></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td><a href="mailto:[email protected]?Subject=Adventure%20Me%20Up...">mail</a></td>
    <td><a href="mailto:[email protected]?Subject=Adventure%20Me%20Up...">mail</a></td>
</tr>
<tr>
    <td colspan=2>Webpage last edited by asdf</td>
</tr>
</table>

Upvotes: 1

Related Questions