 Why do I get blank space between two tables? |
| headbanger |
 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. |
  |
 
|
  |
Replies
| pandy |
Aug 17 2019, 10:30 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 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...  |
|
|
|
| headbanger |
Aug 18 2019, 07:50 AM
Post
#3
|
|
Group: Members Posts: 7 Joined: 17-August 19 Member No.: 26,962 |
Hi,
Sorry but I don't know how to paste the image of what I see. Tried to use Insert Image but I ended up with the URL to my laptop. Anyway, I believe the reason why you see it different is that you added 1 pixel border to arrow table, that causes the last (right arrow) to be moved on new line as division width has been exceeded. Please increase the width, div.main { width: 404px; } and you'll see what I see. My concern here is the arrow on top. I want it to touch the top border line of box table. Thanks. |
|
|
|
| pandy |
Aug 18 2019, 12:29 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
No, I saw the broken image icons in the same spots before I added the border.
To add an image from your computer you do like this. Look for a field below the one you write your post in. It's labeled File Attachments. There you find a Browse button. Use it to find your image on your HD. Then click the button to the right labeled Add This Attachment. A new field appears below the Browse button where you see the file name of your image. Click Add into Post to add it to your post. |
|
|
|
| headbanger |
Aug 18 2019, 04:26 PM
Post
#5
|
|
Group: Members Posts: 7 Joined: 17-August 19 Member No.: 26,962 |
Hi,
Thanks Pandy. Here is the image.  |
|
|
|
Posts in this topic
headbanger Why do I get blank space between two tables? Aug 17 2019, 09:41 PM
pandy Do you really see that with exactly the same code ... Aug 18 2019, 05:46 PM headbanger Hi,
Yes, I'm using Microsoft Edge browser and... Aug 18 2019, 07:17 PM pandy Edge, without borders. Aug 18 2019, 08:19 PM headbanger Hi,
Don't understand why you don't see it... Aug 18 2019, 08:58 PM pandy I'll be... With the images it looks as you sai... Aug 18 2019, 10:49 PM headbanger Hi,
Thanks for the explanation. Now, I understand... Aug 19 2019, 09:38 AM pandy If the two tables you want to have really are data... Aug 19 2019, 12:52 PM headbanger Great. Thank you Pandy for your help. Aug 19 2019, 10:19 PM Dhruva
Hello,
I am new to HTML and this board. Most lik... Nov 4 2019, 02:24 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 16th April 2024 - 02:27 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC