Table under another table in middle of the webpage - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table

Description

Table under another table in middle of the webpage

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html {<!--  www.j  a v  a 2  s  .co  m-->
   height:100%;
   background-image:-ms-linear-gradient(bottom, Chartreuse 0%, yellow 100%);
   background-image:-moz-linear-gradient(bottom, blue 0%, pink 100%);
   background-image:-o-linear-gradient(bottom, OrangeRed 0%, grey 100%);
   background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, BlueViolet), color-stop(2, Chartreuse));
   background-image:-webkit-linear-gradient(bottom, yellow 0%, blue 100%);
   background-image:linear-gradient(to top, pink 0%, OrangeRed 100%);
   background-size:cover;
}

.tg {
   border-collapse:collapse;
   border-spacing:0;
   position:fixed;
   top:51%;
   left:51%;
   transform:translate(-51%, -51%);
}

.tg td {
   font-size:15px;
   padding:11px 6px;
   overflow:hidden;
}

.tg th {
   font-size:15px;
   font-weight:normal;
   padding:11px 6px;
   overflow:hidden;
}

.tg ul.left_justify {
   padding:0;
   margin:auto;
   list-style-type:none;
   text-align:left;
}

.tg ul.right_justify {
   padding:0;
   margin:auto;
   list-style-type:none;
   text-align:right;
}

.a_font {
   font-size:26px;
   color:grey;
   text-decoration:none;
}

.tc {
   float:center;
}
</style> 
 </head> 
 <body> 
  <table class="tg"> 
   <tbody> 
    <tr> 
     <th class="tg-031e"> 
      <ul class="left_justify"> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
      </ul> </th> 
     <th class="tg-031e"> <img src="https://www.java2s.com/style/demo/Opera.png" alt="oops!"> </th> 
     <th class="tg-031e"> 
      <ul class="right_justify"> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
       <li> <a class="a_font" href="">Lorem i</a> </li> 
      </ul> </th> 
    </tr> 
   </tbody> 
  </table> 
  <table align="center" style="top:65%; left:50%; position: fixed; margin-left:-40px;"> 
   <tbody> 
    <tr> 
     <th>Lorem ipsum do</th> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials