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
 
Reply to this topicStart new topic
Replies
pandy
post Aug 17 2019, 10:30 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(headbanger @ Aug 18 2019, 04:41 AM) *

Running this code displays left, right and down arrows touching the box table border

Uhm, no, they don't.


QUOTE
but the top one has blanks in between.


No, it doesn't.

I don't know what you see, but I attach a screen cap of what I see (table borders made red so we can see them.


Do you want a box with text in the middle with images surrounding it? You don't need to put everything in a table for that. And when you change the display property of a table you make it something other than a table. So when you for instance make table.arrow display: inline, table properties like border-collapse and so on no longer apply.

One problem whatever way you do it is that you can't limit the space for text. Unless the text is very short and the box is very big. If you fill that box with text, what happens if someone uses a larger text size than you expect? Something gotta give...



Attached Image
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: 28th March 2024 - 09:34 PM