The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Why do I get blank space between two tables?
headbanger
post Aug 17 2019, 09:41 PM
Post #1





Group: Members
Posts: 7
Joined: 17-August 19
Member No.: 26,962



Hello,

I am new to HTML and this board. Most likely this is straight forward issue but I cannot figure out what I do wrong. Here is the code.

HTML
------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box & Arrows</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="box&arrows.css">
</head>
<div class="main">
<table class="arrow">
<tr>
<td style="width:400px;height:22px;"><img src="arrow_up_22.png"></td>
</tr>
</table>
<table class="arrow">
<tr>
<td style="width:22px;height:352px;"><img src="arrow_left_22.png"></td>
</tr>
</table>
<table class="box">
<tr>
<td style="width:352px;height:352px;">Text goes here...</td>
</tr>
</table>
<table class="arrow">
<tr>
<td style="width:22px;height:352px;"><img src="arrow_right_22.png"></td>
</tr>
</table>
<table class="arrow">
<tr>
<td style="width:400px;height:22px;"><img src="arrow_down_22.png"></td>
</tr>
</table>
</div>
</html>

CSS
----
* {
margin: 0 auto;
padding: 0;
}
div.main {
width: 400px;
}
table.arrow {
display: inline;
float: left;
border-collapse: separate;
border-spacing: 0;
border: 0;
margin: 0;
text-align: center;
}
table.box {
display: block;
float: left;
border-collapse: separate;
border-spacing: 0;
border: 2px solid black;
font: 13px/1.2 Arial, Helvetica, sans-serif;
margin: 0;
}
table.box td {
text-align: center;
}

Running this code displays left, right and down arrows touching the box table border but the top one has blanks in between. I searched internet tried things I found but still cannot make up arrow to touch the box table border. The arrow image is the same I just used paint application to rotate it and create all 4 arrows. Please let me know what I do wrong and if you can show me the code which works.

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 14th November 2019 - 04:17 PM