HTML & CSS Controlling amount of white space between table and graphics in Google Sites

ulrichburke · Mar 20, 2022

Dear All.

Disabled guy trying to create a website to help other disableds find jobs. Using Google Sites for everything - domain, the lot. Wanted to put a table on the site. Couldn't make one in Google Sites, so made one in Google Workspace and embedded the code. Table itself looks fine.

Wanted to put a picture directly under it. In design view, picture looks perfectly positioned. In reality view, there's a foot - I kid thee not - of white space between end of embedded table and picture. Tried going into CSS and adjusting all the border commands I could find, no joy!

First ever attempt at a website here. Learned LOADS, this is the first prob. I've not been able to solve. Can solve text gaps with the br command, doesn't work with pictures though! How do I control how much white space there is around graphics on Google Sites? I've found other people with this prob. on forums but no answers. Tried putting bit of extra space at base of table, then putting pic. in same blue-box-with-dots-around-it (sorry I don't know the techie name for that!) as the table and it KINDA works - the pic's in the right place but it goes gigantic.

If all else fails, knowing how to keep the pic. small when it's in the same blue box as the table would PROBABLY do me - if I can't make it a link that way, I'm HOPING I can put a link button JUST outside the box without there being a massive gap between bottom of box and link button!

Any ideas anyone?

Yours hopefully

Chris.

Johna · Mar 20, 2022

ulrichburke said:
Tried going into CSS and adjusting all the border commands I could find, no joy!

It's probably something with the margin or padding and not the border.
Try adjusting margin-bottom or padding-bottom for the table (or margin-top or padding-top for the picture).

I'm not too sure if that's why, it'll be easier if I can see your code.

ulrichburke · Mar 20, 2022

Dear Johna.

Thankyou very, very much.

Here's the code. I didn't write it. I created the table in Google Docs, then opened up the 'inspect HTML' view, copied all the code from there and embedded it into my Google Site via the HTML/CODE link box. So please don't ask me why I did this or that in it - I've not done anything in it, just copied it and used it. I understand BITS of HTML/CSS now - didn't before I started doing this website, didn't understand any of it! - but not enough to know what's really going on here.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">ol{margin:0;padding:0}table td,table th{padding:0}.c4{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#ffffff;border-top-width:1pt;border-right-width:1pt;border-left-color:#ffffff;vertical-align:top;border-right-color:#ffffff;border-left-width:1pt;border-top-style:solid;background-color:#00ffff;border-left-style:solid;border-bottom-width:1pt;width:249.8pt;border-top-color:#ffffff;border-bottom-style:solid}.c14{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#ffffff;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;background-color:#00ffff;border-left-style:solid;border-bottom-width:1pt;width:375.8pt;border-top-color:#000000;border-bottom-style:solid}.c2{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:375.8pt;border-top-color:#000000;border-bottom-style:solid}.c17{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:249.8pt;border-top-color:#ffffff;border-bottom-style:solid}.c0{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:249.8pt;border-top-color:#000000;border-bottom-style:solid}.c1{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c8{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c16{font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c12{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:right}.c13{padding-top:0pt;padding-bottom:-50pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c7{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:center}.c9{margin-left:auto;border-spacing:0;border-collapse:collapse;margin-right:auto}.c3{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c15{background-color:#ffffff;max-width:595.4pt;padding:0pt 0pt 0pt 0pt}.c10{color:#ffffff}.c5{height:0pt}.c11{height:38.2pt}.c6{height:11pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:0pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:0pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:0pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:0pt;color:#000000;font-size:16pt;padding-bottom:0pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:0pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:0pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:0pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:0pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c15"><a id="t.3cbeac50692c9fe5c16d88084ec6493ed1335d59"></a><a id="t.0"></a><table class="c9"><tbody><tr class="c11"><td class="c4" colspan="1" rowspan="1">Press this key                                </td><td class="c14" colspan="1" rowspan="1"> To do this</td></tr><tr class="c5"><td class="c17" colspan="1" rowspan="1">Ctrl + X </td><td class="c2" colspan="1" rowspan="1"> Cut the selected item.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + C (or Ctrl + Insert)</td><td class="c2" colspan="1" rowspan="1"> Copy the selected item.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + V (or Shift + Insert)           </td><td class="c2" colspan="1" rowspan="1"> Paste the selected item. (Works for CTRL-X AND CTRL-V.  You can also use these commands - either of them - to copy data from a webpage which you’ve highlighted with your mouse.  However, CTRL-X AND CTRL-V will both COPY the data, neither of them will make the data disappear from the web page! </td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Z</td><td class="c2" colspan="1" rowspan="1">Undo an action.</td></tr><tr class="c5"><td class="c0" colspan="0" rowspan="1">Alt + Tab</td><td class="c2" colspan="1" rowspan="1">Switch between open apps.  If you’ve got a lot of apps open, keep  the ALT button held down with your thumb and tap the TAB button with a finger.  This will make each app’s window highlighted in turn. When you’ve highlighted the one you want, release both buttons - and that app will now fill the screen! You can repeat that trick whenever you want to change to using a different active app - the app must be active to appear on the list, it won’t scroll through all the apps on the computer!</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Alt + F4                                   </td><td class="c2" colspan="1" rowspan="1"> Close the active item, or exit the active app.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Windows logo key  + L  </td><td class="c2" colspan="1" rowspan="1"> Lock your PC. (Make sure you know your password to UNLOCK IT AGAIN!!)</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Windows logo key  + D  </td><td class="c2" colspan="1" rowspan="1">Display and hide the desktop</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">F2                           </td><td class="c2" colspan="1" rowspan="1">Rename the selected item.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">F3  </td><td class="c2" colspan="1" rowspan="1">Search for a file or folder in File Explorer.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">F4   </td><td class="c2" colspan="1" rowspan="1"> Display the address bar list in File Explorer.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">F5 </td><td class="c2" colspan="1" rowspan="1"> Refresh the active window.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">F6</td><td class="c2" colspan="1" rowspan="1"> Cycle through screen elements in a window or on the desktop.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">F10</td><td class="c2" colspan="1" rowspan="1">Activate the Menu bar in the active app.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Alt + F8  </td><td class="c2" colspan="1" rowspan="1"> Show your password on the sign-in screen.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Alt + Esc                           </td><td class="c2" colspan="1" rowspan="1"> Cycle through items in the order in which they were opened.  Yup - if you’ve spotted that sounds similar to ALT-TAB, you’re right, it is! Difference IS - it brings up each app full screen, rather than just bringing up oversized thumbnails of all of them.  Try both, see which you prefer.  </td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Esc                                   </td><td class="c2" colspan="1" rowspan="1"> Stop or leave the current task.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Alt + Enter</td><td class="c2" colspan="1" rowspan="1"> Display properties for the selected item.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Alt + Spacebar </td><td class="c2" colspan="1" rowspan="1">Open the shortcut menu for the active window.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Alt + Left arrow        </td><td class="c2" colspan="1" rowspan="1"> Go back.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Alt + Right arrow  </td><td class="c2" colspan="1" rowspan="1"> Go forward.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Page Up/Page Down        </td><td class="c2" colspan="1" rowspan="1"> Move up (or down!) one screen.  Works best on  Internet pages.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + F4                           </td><td class="c2" colspan="1" rowspan="1"> Close the active document (in apps that are full- screen and let you have multiple documents open at the same time).</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + A                                   </td><td class="c2" colspan="1" rowspan="1"> Select all items in a document or window.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + D (or Delete)                    </td><td class="c2" colspan="1" rowspan="1"> Delete the selected item and move it to the Recycle  Bin.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + E                                    </td><td class="c2" colspan="1" rowspan="1">Open Search (in most apps).</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + R (or F5)                            </td><td class="c2" colspan="1" rowspan="1">Refresh the active window.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Right arrow                    </td><td class="c2" colspan="1" rowspan="1">Move the cursor to the beginning of the next word.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Left arrow                   </td><td class="c2" colspan="1" rowspan="1"> Move the cursor to the beginning of the previous  word.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Down arrow</td><td class="c2" colspan="1" rowspan="1"> Move the cursor to the beginning of the next paragraph.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Up arrow  </td><td class="c2" colspan="1" rowspan="1"> Move the cursor to the beginning of the previous paragraph.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Alt + Tab </td><td class="c2" colspan="1" rowspan="1">Use the arrow keys to switch between all open apps.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Alt + underlined letter                    </td><td class="c2" colspan="1" rowspan="1">Perform the command for that letter.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Alt + Shift + arrow keys                    </td><td class="c2" colspan="1" rowspan="1">When a group or tile is in focus on the Start menu,   move it in the direction specified.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Shift + arrow keys           </td><td class="c2" colspan="1" rowspan="1"> When a tile is in focus on the Start menu, move it into another tile to create a folder.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + arrow keys</td><td class="c2" colspan="1" rowspan="1">Resize the Start menu when it's open</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">.Ctrl + arrow key                     </td><td class="c2" colspan="1" rowspan="1">Select multiple individual items in a window or on the desktop (to move to an item).  If you’d created a new folder (right-click on the mouse on a blank area of screen) and now you wanted to select things to go into the folder, that’s the command you’d use.  Or….</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + left mouse click</td><td class="c2" colspan="1" rowspan="1">Lets you select items that aren’t next door to (or anywhere near eachother!) on the screen.  If you’d created a new folder and wanted to cherry-pick items to go into it, that’s the command you’d used.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Shift with an arrow key           </td><td class="c2" colspan="1" rowspan="1"> Select a block of text.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Esc                           </td><td class="c2" colspan="1" rowspan="1"> Open Start.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Shift + Esc                   </td><td class="c2" colspan="1" rowspan="1"> Open Task Manager.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Shift                            </td><td class="c2" colspan="1" rowspan="1">Switch the keyboard layout when multiple keyboard  layouts are available.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Ctrl + Spacebar</td><td class="c2" colspan="1" rowspan="1"> Turn the Chinese input method editor (IME) on or off.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Shift + F10</td><td class="c2" colspan="1" rowspan="1"> Display the shortcut menu for the selected item.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Shift with any arrow key</td><td class="c2" colspan="1" rowspan="1">Select more than one item in a window or on the desktop, or select text in a document.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Shift + Delete                           </td><td class="c2" colspan="1" rowspan="1"> Delete the selected item without moving it to the  Recycle Bin first.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Right arrow                           </td><td class="c2" colspan="1" rowspan="1"> Open the next menu to the right, or open a submenu.</td></tr><tr class="c5"><td class="c0" colspan="1" rowspan="1">Left arrow                           </td><td class="c2" colspan="1" rowspan="1"> Open the next menu to the left, or close a submenu.</td></tr></tbody></table></body></html>

That's the lot.

If you want me to post pictures - if I can here - of what the page SHOULD look like and what it DOES look like, just ask. Anything else, just ask too. I want to know HOW to get picture close to bottom of embedded table so I could do it again, but there's something else I've noticed in Google Sites which might be a clue.

In their design view, they've got a little bunch of set layouts you can drag onto the page to use. They've got picture ABOVE text, picture NEXT to text (on left or right side), picture next to picture. They DON'T have picture BELOW text. Is that because you can't do it on Google Sites without this gap problem? Just to finish - tried doing the whole thing as a graphic and embedding the graphic but that don't seem to work either. The graphic stretches oddly - by the time the middle bit's readable the outer bits have disappeared out of the side of the blue-rectangle-with-blobs (what's the techie name for that?) I've looked but can't find any reason why that happens, it just makes graphics difficult to use.

Yours respectfully

Chris.

Johna · Mar 20, 2022

Hi @ulrichburke,
Can I also see the HTML and CSS of your image?

ulrichburke said:
If you want me to post pictures - if I can here - of what the page SHOULD look like and what it DOES look like, just ask

Yeah, that'll be useful.

ulrichburke said:
blue-rectangle-with-blobs (what's the techie name for that?)

Hmm, don't know anything like that, is it a Google sites thing only? Or do you mean like a resizing thing when you add an image or smth?

ulrichburke · Mar 20, 2022

Dear Johna.

I meant one of those resizing boxes, you drag on the blobs to increase/decrease the size of the picture inside it. I've got zero idea how you show the HTML of a JPG picture, no sarcasm there (if you read it as such, I've got Asperger's, never sure if I sound sarcastic or not) but I've done you the layout cos they're interesting. I'm going to attach the pics. now, see if they come up here or not...

Hokay. The first one - if they come up in the same order for you as they are for me - is the graphic with the resizing 'blue blob box' around it, so you know what I'm talking about. The layouts are interesting - it's a screenshot from the Google Design Page, they've got pictures NEXT to pictures, pictures ABOVE text but no pictures BELOW text which is why I'm wondering if it's a Google prob., maybe Google can't DO pictures below text. But they're a HEWGE company, you'd think they'd have a designer who could handle pictures under a text block or table, no?

The third one is what the table and graphic SHOULD look like, it's still in design view, wanted to show you what I'm aiming for. And the slightly hilarious last one is what they DO look like in reality - in 'Preview' but in reality as well - talk about social distancing! I had to shrink the screen right down just to get them both in the same screenshot. I'm sorry if the descriptions don't match up with the order the pictures come up for you in, I hope it's obvious what I'm talking about if the pics. come up in a different sequence when I post this.

How do I show you the HTML of a JPG? Serious question, I've no idea how to do that. Remember this is the first time ever I've done any of this stuff so if it sounds a stoopid question, it's pure ignorance. I'm floundering here!

What's the right name for that box with blue blobs?

Yours hopefully

Chris.

Johna · Mar 22, 2022

ulrichburke said:
How do I show you the HTML of a JPG?

I mean like, if it's in a div or smth, how it's in the page.
But the HTML isn't even that important, I probably just need the CSS. (The styling of the image.)

ulrichburke said:
What's the right name for that box with blue blobs?

Idk, I just call it a 'resize box' or smth.

Welcome!

HTML & CSS Controlling amount of white space between table and graphics in Google Sites

ulrichburke

New Coder

Johna

Frontend Developer

ulrichburke

New Coder

Johna

Frontend Developer

ulrichburke

New Coder

Attachments

Johna

Frontend Developer

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

We value your privacy

Welcome!

HTML & CSS Controlling amount of white space between table and graphics in Google Sites

New Coder

Frontend Developer

New Coder

Frontend Developer

New Coder

Attachments

Frontend Developer

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy