Table Layout!

old web inspired layout

Welcome!

This is a free layout for anyone who wants a website but doesn't know what they're doing! This is based of old web layouts. I would appreciate a link back but you're free to do what you want. Have fun!

How do I Get the Code?

Copy paste it from here:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title> 
        
        <meta charset="utf-8">
        <meta name="description" content="description"> 
        
        
        <style type=text/css>
        /* feel free to mess around and see what things do but padding and margin might mess up dimentions so just remember that padding (extra space inside things) and margins (extra space around things) take up space that are not acounted for in % widths */
        /* if you can't figure out how invisible divs or table parts are affecting others give them a noticible background to track to figure it out */
        
        /*@font-face { font-family: FontName; src: url(".ttf"); }  to add a font file you can call on (neocities doesn't allow .ttf files anymore if your not a supporter) */
        /*font-family: FontName;  To asign something to be that font */
        
        body { 
        background-color: lavender;
        /* background-image: url(".png"); if you want a picture background  */
        background-repeat: repeat;
        background-size: 20px;
        padding: 0px;
        margin: 0px;
        margin-bottom: 50px;
        overflow-x: hidden;
        overflow-y: auto; /* shows scrollbar only when overflowing*/
        }
        
        div {
        padding: 0;
        margin: 0;
        }
        
        table {
        width: 100%;
        }
        
        td {
        padding: 0;
        margin: 0;
        vertical-align: top;
        }
        
        h1 {
        color: purple;
        }
        
        h2 {
        color: magenta;
        }
        
        h3 {
        color: magenta;
        }
        
        h4 {
        color: blue;
        }
        
        h5 {
        color: blue;
        }
        
        h6 {
        color: blue;
        }
        
        p {
        color: black;
        }
        
        /*lists*/
        li {
        color: black;
        }
        
        /*links*/
        a {
        text-decoration: none;
        color: blue;
        background: none; 
        }

/*links when a mouse hovers*/
        a:hover {
        text-decoration: none;
        color: white;
        background: blue; 
        }
        
        /*when someone highlights text*/
        ::selection {
        color: white;
        background: blue; 
        }
        
        /* main div width */
        #main {
        padding: 0;
        margin: 0;
        }
        
        /* side divs width */
        #side {
        width: 200px;
        padding: 0;
        margin: 0;
        }
        
        #mainbar {
        width: 100%;
        height: 500px;
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
        }
        
        #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        padding: 1%;
        margin: 0px;
        width: 180px;
        background-color: #ffb9b9;
        height: 100%;
        }
        
        #sidebar-bottom {
        position: fixed;
        bottom: 20px;
        left: 0;
        padding: 1%;
        margin: 0px;
        width: 180px;
        }
        
        #side-border {
        background-image: url("Images/rightlace.gif");
        background-repeat: repeat-y;
        background-size: 60px;
        position: fixed;
        top: 0;
        left: 200px;
        padding: 0;
        margin: 0px;
        width: 60px;
        background-color: none;
        height: 100%;
        }
        
        #div {
        /*border: 3px solid red; uncomment this to see where the divs are*/
        width: 80%;
        padding: 1%;
        margin: auto;
        /*margin: 0;
        margin-left: 5%; uncomment this and comment out margin auto to have divs go to the side instead of centering*/
        margin-top:  3%; /*space between divs*/
        }
        
        #corner-image {
        position: fixed;
        bottom: 0px; 
        right: 0px;
        }
        </style>
    </head>
<body>
<table>
<tr>
<td id="side">
</td>
<td id="main">
<div id="mainbar">
            <div align="center" id="div">
            
              <h1 id="gradient_text">Table Layout!</h1>
              <p>old web inspired layout</p>
            
            </div><div align="center" id="div">
              
              <h2>Welcome!</h2>
              <p align="left" id="ind">This is a free layout for anyone who wants a website but doesn't know what they're doing! This is based of old web layouts. I would appreciate a link back but you're free to do what you want. Have fun!</p>
            
            </div><div align="center" id="div">
            
              <h3>How do I Get the Code?</h3>
              <p>You already have it silly!</p>
            
            </div><div align="center" id="div">
            
              <h5>Website Resources:</h5>
              <ul align="left">
              <li><a href="https://www.w3schools.com/" target="_blank">W3 Schools</a>- css and html tag reference</li>
              <li><a href="https://neocities.org/" target="_blank">Neocities</a>- free website hosting</li>
              <li><a href="https://www.dragonflycave.com/webmasters" target="_blank">Cave of Drgonflies</a>- guide to html and other tips</li>
              <li><a href="https://www.favicon.cc/" target="_blank">Favicon.cc</a>- free online favicon maker</li>
              </ul>
            
            </div><div align="center" id="div">
            
              <h5>Graphics:</h5>
              <ul align="left">
              <li><a href="https://foollovers.com/" target="_blank">Fool Lovers</a>- backgrounds and graphics</li>
              <li><a href="https://cinni.net/" target="_blank">Cinni.net</a>- backgrounds, fonts, and graphics</li>
              <li><a href="https://www.asterism-m.com/" target="_blank">Asterism</a>- fonts and graphics</li>
              <li><a href="https://99gifshop.neocities.org/" target="_blank">99 Gif Shop</a>- old web gifs</li>
              <li><a href="https://gifcities.org/" target="_blank">Gif Cities</a>- gifs from old websites</li>
              </ul>
            
            </div>
</div>
</td>
</tr>
</table>
            <div id="sidebar">
            
              <h2 align="center">Index</h2>
              <p align="left"><a href="https://saturn-laundromat.neocities.org/layout.table">Gradient Layout</a></p>
              <p align="left"><a href="https://saturn-laundromat.neocities.org/coding">Back</a></p>
            
            </div>
            <div id="sidebar-bottom">
            
              <p align="left">Rose from: <a href="https://99gifshop.neocities.org/items/4/" target="_blank">99 Gif Shop</a></p>
              <p align="left">Border from: <a href="https://foollovers.com/mat/t-frame08.html" target="_blank">Fool Lovers</a></p>
            
            </div>
            <div id="side-border">
            </div>
            
            <img id="corner-image" src="Images/RedFlowerBloom.gif" height="250px" alt="red flower blooming">
</body>
</html>

Website Resources:

W3 Schools- css and html tag reference
Neocities- free website hosting
Cave of Drgonflies- guide to html and other tips
Favicon.cc- free online favicon maker

Graphics:

Fool Lovers- backgrounds and graphics
Cinni.net- backgrounds, fonts, and graphics
Asterism- fonts and graphics
99 Gif Shop- old web gifs
Gif Cities- gifs from old websites