Jump to content
vmars316

Html spacing of Tables

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by vmars316

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

 

 

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>&nbsp;  &nbsp;  &nbsp;  
              &nbsp; Attaching Arms 
      </td>
      <td class="MarginTop">  


None of these work . 

Edited by vmars316

Share this post


Link to post
Share on other sites

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 .

Share this post


Link to post
Share on other sites

However , this works fine :

  td.VaTop { vertical-align: top;
  }

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

Thanks

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×