Html spacing of Tables

vmars316 · July 10, 2018

Hello & Thanks ,

win 10 , chrome:

<!DOCTYPE html>
<html>
<head>
<style>
.button{
    background-color: #282A36;
    border: none;
    color: #C8982B;
    color: #D9B04E;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-family: "Comic Sans MS", cursive, sans-serif ;
    font-size: 24px;
    cursor: pointer;
}    
span.RedTxt{
    color: red;
}
  table.center {
    margin-left:auto; 
    margin-right:auto;
  }

  table { border: 8px solid #D9B04E;
              
  }

  #DivWholePage {  border: 24px solid #282A36;
  }
  }
</style>
</head>
<body>
<div id="DivWholePage">
<div id="TopRightImage" style="text-align:center;">      
    <br><button class="button">Dancing Man Kit -Docs & Pics</button></a>
</div> <!-- TopRightImage  -->   

    <br><br>
<!-- =====================NEW TABLE==================== -->
	<table  class="center" style="text-align: left; height:100vh; " >
      <tbody>
      <tr>
      <td width="226" height="200">  
             <img src="Arms-1.png" alt="SmileyFace.png">
      <br>&nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  
              Attaching Arms 
      </td>
      <td>  
              Attaching Arms :
      <br><br> Notice how the forearms turn out and away from the body .        
      <br>The purpose of this is so that the arms don't collide with the body
      <br>as they swing while dancing .
      <br>To make this happen , you need to twist the forearm out a bit  
      <br>as you glue the upper arm to the forearm . Make one forearm  
      <br>twist to the right . And twist the other forearm to the left ,
      <br><==== as shown in the photo .
             
      </td>
      </tr>      
      </tbody>
  </table>
      <br><br>
<!-- =====================NEW TABLE==================== -->
	<table  class="center" style="text-align: left; height:100vh; " >
      <tbody>
      <tr>
      <td width="226" height="200">  
             <img src="ArmsToShoulder-2.png" alt="SmileyFace.png">
      <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png">
              <img src="Axle-EnndCap-1.png" alt="SmileyFace.png">
      <br>       
              Attaching Arms to Shoulders
      </td>

      <td>  
              Attaching Arms to Shoulders :
      <br><br> Make sure the forearms turn out away from the body .        
      <br>Thread the axle thru the arm and thru the 
      <br>end cap piece and into the shoulder hole . 
      <br>Test it out to make sure axle is the correct length . 
      <br>You may have cut the axle a bit .
      <br>Next glue the axle into the endcap , making sure to keep
      <br>any glue from spreading up the axle -another <span class="RedTxt">danger zone</span> .
      <br>When glue is dry , mount the arm making sure the arm
      <br>swings freely . If not you may have to sand off excess glue .
      <br>Next glue the axle (which now includes the arm and endcap) 
      <br>into the shoulder hole . Again making sure the arm swings . 
      <br>Repeat same procedure for the other arm .
      <br><==== as shown in photos .
      </td>
      </tr>      
      </tbody>
  </table>
    <br><br>
</div id="DivWholePage">
</body>
</html>

Pls , why does 1st table have more space showing at the Top

than does 2nd table ?

I would like them both to show 1 <br> from the top .

Thanks

dsonesuk · July 10, 2018

Perhaps its due to total lack of valid CSS and html coding, and that you ARE using br elements instead of margins.

vmars316 · July 10, 2018

Thanks ,

Can someone give me an example of correct css & html coding .

In the mean time I will look for how to's on css margins .

Thanks

Edited July 10, 2018 by vmars316

vmars316 · July 10, 2018

When I use this:

td { padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
The right and left padding works fine

but top and bottom padding don't work .

Still need help Thanks

vmars316 · July 11, 2018

This works for the 2nd <td>

But for 1st <td> there is 200px of space of the bottom .

td { padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
vertical-align: top;
}
so right now code looks like:

<!DOCTYPE html>
<html>
<head>
<style>
.button{
    background-color: #282A36;
    border: none;
    color: #C8982B;
    color: #D9B04E;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-family: "Comic Sans MS", cursive, sans-serif ;
    font-size: 24px;
    cursor: pointer;
}    
span.RedTxt{
    color: red;
}
  table.center { 
    margin-right:auto; 
    margin-left:auto; 
}
  table { border: 8px solid #D9B04E;
  }
td { padding-top: 5px;
       padding-right: 5px;
       padding-left: 5px;
       padding-bottom: 5px;
       vertical-align: top;  
  }
#DivWholePage {  border: 24px solid #282A36;
  }

</style>
</head>
<body>
<div id="DivWholePage">
<div id="TopRightImage" style="text-align:center;">      
    <br><button class="button">Dancing Man Kit -Docs & Pics</button></a>
</div> <!-- TopRightImage  -->   

    <br><br>
<!-- =====================NEW TABLE==================== -->
	<table  class="center" style="text-align: left; height:100vh; " >
      <tbody>
      <tr >
      <td>  
             <img src="Arms-1.png" alt="SmileyFace.png">
         <br><br>&nbsp;  &nbsp;  &nbsp;  
              Attaching Arms 
      </td>
      <td >  
      <br><br>     Attaching Arms :
      <br><br> Notice how the forearms turn out and away from the body .        
      <br>The purpose of this is so that the arms don't collide with the body
      <br>as they swing while dancing .
      <br>To make this happen , you need to twist the forearm out a bit  
      <br>as you glue the upper arm to the forearm . Make one forearm  
      <br>twist to the right . And twist the other forearm to the left ,
      <br><==== as shown in the photo .
             
      </td>
      </tr>      
      </tbody>
  </table>
      <br><br>
<!-- =====================NEW TABLE==================== -->
	<table  class="center" style="text-align: left; height:100vh; " >
      <tbody>
      <tr>
      <td >  
             <img src="ArmsToShoulder-2.png" alt="SmileyFace.png">
      <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png">
              <img src="Axle-EnndCap-1.png" alt="SmileyFace.png">
      <br>       
              Attaching Arms to Shoulders
      </td>

      <td>  
      <br>              Attaching Arms to Shoulders :
      <br><br> Make sure the forearms turn out away from the body .        
      <br>Thread the axle thru the arm and thru the 
      <br>end cap piece and into the shoulder hole . 
      <br>Test it out to make sure axle is the correct length . 
      <br>You may have cut the axle a bit .
      <br>Next glue the axle into the endcap , making sure to keep
      <br>any glue from spreading up the axle -another <span class="RedTxt">danger zone</span> .
      <br>When glue is dry , mount the arm making sure the arm
      <br>swings freely . If not you may have to sand off excess glue .
      <br>Next glue the axle (which now includes the arm and endcap) 
      <br>into the shoulder hole . Again making sure the arm swings . 
      <br>Repeat same procedure for the other arm .
      <br><==== as shown in photos .
      </td>
      </tr>      
      </tbody>
  </table>
    <br><br>
</div id="DivWholePage">
</body>
</html>

How do I eliminate all that space at bottom ?

Thanks

dsonesuk · July 11, 2018

Ditto my last post, and this will help

https://validator.w3.org/nu/#textarea

vmars316 · July 12, 2018

https://validator.w3.org/nu/#textarea

Thanks , no errors now .

This is the closest I can get so far .

Still table 1 has too much space at top and bottom .

Can you help me out here . Thanks

<!DOCTYPE html>
<html  lang="en">
<head>
<title>Table spacing problem</title>
<style>
.button{
    background-color: #282A36;
    border: none;
    color: #C8982B;
    color: #D9B04E;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-family: "Comic Sans MS", cursive, sans-serif ;
    font-size: 24px;
    cursor: pointer;
}    
span.RedTxt{
    color: red;
}
  table.center {
                       margin-right:auto; 
                       margin-left:auto;      
}

  table { border: 8px solid #D9B04E;
             width: auto;
             height: auto;
  }

  #DivWholePage {  border: 24px solid #282A36;
  }

</style>
</head>
<body>
<div id="DivWholePage">
<div id="TopRightImage" style="text-align:center;">      
    <br><button class="button">Dancing Man Kit -Docs & Pics</button>
</div> <!-- TopRightImage  -->   

    <br><br>
<!-- =====================NEW TABLE==================== -->
	<table  class="center" style="text-align: left; height:100vh;">
      <tbody>
      <tr>
      <td>
             <img src="Arms-1.png" alt="SmileyFace.png">
         <br><br>&nbsp;  &nbsp;  &nbsp;  
              &nbsp; Attaching Arms 
      </td>
      <td>  
      <br><br>     Attaching Arms :
      <br><br> Notice how the forearms turn out and away from the body .        
      <br>The purpose of this is so that the arms don't collide with the body
      <br>as they swing while dancing .
      <br>To make this happen , you need to twist the forearm out a bit  
      <br>as you glue the upper arm to the forearm . Make one forearm  
      <br>twist to the right . And twist the other forearm to the left ,
      <br> as shown in the photo to left . 
      </td> 
      </tr>      
      </tbody>
  </table>
      <br><br>
<!-- =====================NEW TABLE==================== -->
	<table  class="center" style="text-align: left; height:100vh; " >
      <tbody>
      <tr>
      <td >  
             <img src="ArmsToShoulder-2.png" alt="SmileyFace.png">
      <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png">
              <img src="Axle-EnndCap-1.png" alt="SmileyFace.png">
      <br>       
              Attaching Arms to Shoulders
      </td>

      <td>  
      <br>              Attaching Arms to Shoulders :
      <br><br> Make sure the forearms turn out away from the body .        
      <br>Thread the axle thru the arm and thru the 
      <br>end cap piece and into the shoulder hole . 
      <br>Test it out to make sure axle is the correct length . 
      <br>as shown in photos at left .
      </td>
      </tr>      
      </tbody>
  </table>
    
</div> <!--  <div id="DivWholePage">  -->
</body>
</html>

dsonesuk · July 12, 2018

I've already told you not to use br to create spacing, and yet! you still continue to do so, using br elements mean they will create a block of spacing of the current font-size, line-height used where they are placed, whereas using margins instead AGAIN! already mentioned, will give you a more precise manageable spacing. I'm not going to give an example because its extremely pretty basic knowledge which you can get from the tutorials to test and so if you can't be bothered to learn it yourself, why should I bother.

Edited July 12, 2018 by dsonesuk

vmars316 · July 12, 2018

Thanks ,

I understand what you are saying

But actually I have put in may hours trying all sorts of things with margins .

I was hopeful that margin-top:1px; would do the trick , but nogo .

Also tried Divs and Blocks .

But haven't gotten the results I am after .

So my last post is the best I came up with .

So I'll keep trying .

Thanks

vmars316 · July 12, 2018

For example :

table.center {
margin-top:1px;
margin-right:auto;
margin-left:auto;
}

table { border: 8px solid #D9B04E;
width: auto;
height: auto;
}
td,tr .MarginTop { margin-top:1px;
}

<table class="center" style="text-align: left; height:100vh;">
<tbody>
<tr class="MarginTop">
<td class="MarginTop" >
<img src="Arms-1.png" alt="SmileyFace.png">
<br><br>     
  Attaching Arms
</td>
<td class="MarginTop">

None of these work .

Edited July 12, 2018 by vmars316

vmars316 · July 12, 2018

Also tried :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Divs & Blocks</title>
<style>

.button{
    background-color: #282A36;
    border: none;
    color: #C8982B;
    color: #D9B04E;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-family: "Comic Sans MS", cursive, sans-serif ;
    font-size: 24px;
    cursor: pointer;
}    
span.RedTxt{
    color: red;
}
  table.center {
                       margin-right:auto; 
                       margin-left:auto;      
}

  table { border: 8px solid #D9B04E;
             width: auto;
             height: auto;
  }

  #DivWholePage {  border: 24px solid #282A36;
  }

span.a {
    display: inline; /* the default for span */
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;    
    background-color: yellow; 
}

span.b {
    display: inline-block;
    margin-top: 1px;
    width: 250px;
    height: 300px;
    border: 0px ;        
    padding: 5px;
    background-color: lightblue; 
}

span.c {
    display: block;
    margin-top: 1px;
    width: 500px;
    height: 300px;
    padding: 5px;
    border: 0px ;        
    background-color: yellow; 
}
</style>
</head>
<body>

<div id="DivWholePage">
<div id="TopRightImage" style="text-align:center;">      
    <br><button class="button">Dancing Man Kit -Docs & Pics</button>
</div> <!-- TopRightImage  -->   

    <br><br>

<div>
	<table  class="center" style="text-align: left; height:100vh;">
<tr>
<td>
<span class="b"><img src="Arms-1.png" alt="SmileyFace.png">
         <br><br>&nbsp;  &nbsp;  &nbsp;  
              &nbsp; Attaching Arms </span> 
</td>              
<td>
<span class="c">      <br><br>     Attaching Arms :
      <br><br> Notice how the forearms turn out and away from the body .        
      <br>The purpose of this is so that the arms don't collide with the body
      <br>as they swing while dancing .
      <br>To make this happen , you need to twist the forearm out a bit  
      <br>as you glue the upper arm to the forearm . Make one forearm  
      <br>twist to the right . And twist the other forearm to the left ,
      <br> as shown in the photo to left . </span> 
</td>
</tr>
</table>
</div>
<br><br>
<div>
	<table  class="center" style="text-align: left; height:100vh;">
<tr>
<td>
<span class="b"><img src="Arms-1.png" alt="SmileyFace.png">
         <br><br>&nbsp;  &nbsp;  &nbsp;  
              &nbsp; Attaching Arms 
</span> 
</td>              
<td>
<span class="c">      <br><br>     Attaching Arms :
      <br><br> Notice how the forearms turn out and away from the body .        
      <br>The purpose of this is so that the arms don't collide with the body
      <br>as they swing while dancing .
      <br>To make this happen , you need to twist the forearm out a bit  
      <br>as you glue the upper arm to the forearm . Make one forearm  
      <br>twist to the right . And twist the other forearm to the left ,
      <br> as shown in the photo to left . 
</span> 
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

But ran into extra spacing at top .

vmars316 · July 12, 2018

However , this works fine :

td.VaTop { vertical-align: top;
}

Now , how do I get rid of all that space at the bottom ?

Thanks

dsonesuk · July 14, 2018

Looking at it again! I think what you are referring to, is the space created by using height: 100vh; for the table height? this will cause its height to always be that of the browser windows viewport height, it won't adjust to the number of tables using this vh unit, all will be the same viewport height, if the viewport height of browser is 800px each of the tables height will be 800px; and if the table content is only 60% you will have 20% spacing of 800px (160px) top and bottom.

vmars316 · July 14, 2018

Thank you very much !

End of problem .

Html spacing of Tables

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in