Using HTML Tables can Create Some Great Responsive Designs!

<table>
    <tr>
        <th>
        Hello!
        </th>
        <th>
        </th>
    </tr>
</table>

Tables in HTML have an unknown usage that many do not see! I designed this site | https://theclassycreditchick.com using tables to allow the site to fully scale and be properly viewed on all devices! Yes, I didn’t use Bootstrap or @media at all! I simply used <table></table> and the HTML5, CSS3, and JavaScript! Now, I definitely know Bootstrap and responsive design. I use it all the time. In fact I wrote a recent article explaining the use and effectiveness of Bootstrap in modern web design. But, the best part about the way I use tables is the site can look identical to the PC version of the site without the site being too small to see.

I do this by putting everything that I want to auto-scale in a table. Anything else I attempt to use max-height and max-width CSS code to auto-size certain elements like pictures on the screen to the width of the actual window you are viewing it on. The code is designed so that the aspect ratio is not changed even if the width grows with the window size. This allows the entire page to scale with the window no matter what type of device you are using. This way is also much faster to load because there are not too many scripts on the page. So, even on a low-end server you get much faster load speeds and still can implement high quality transitions like the fading I programmed into the page that fades in while scrolling down.

It works like this…

 <style>
 article {
    margin-top: 50px;
    background-image: linear-gradient(rgb(176, 45, 229), rgb(176,45,172));
    padding: 20px;
    box-shadow: 0 10px 30px rgb(32,32,32);
}

article img{
    margin: auto;
}

article img:hover{
    filter: drop-shadow(4px -4px 4px rgb(64,64,64))brightness(105%);
}

article p{
    color: whitesmoke;
    text-align: justify;
    font-size: 1.25em;
    font-weight: bold;
    width: 100%;
}

h1 {
    font-size: 4em;
    font-family: Garamond, Helvetica, sans-serif;
    color: violet;
    text-shadow: 1px 1px 1px black;
}

table th{
    padding: 20px;
}

table{
    text-align: center;
    table-layout: fixed;
}

#piechart:hover{
    filter: brightness(105%);
}

button {
    background: gold;
    color: white;
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 0 darkslategray;
    padding: 20px;
    font-size: 1.25em;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    cursor: pointer;
    filter: drop-shadow(0 4px 4px rgb(32,32,32));
}

    button:hover {
        transition: background 0.5s ease-in-out;
        background: pink;
        box-shadow: 0 10px 0 darkslategray;
    }
	
#sectionborder{
    border-bottom: thick solid orange;
    width: 25%;
    border-radius: 20px;
    margin: auto;
    margin-bottom: 50px;
    margin-top: 50px;
    box-shadow: 0 1px 4px rgb(64,64,64);
}
 </style>
 
 <section class="hideme" style="background-image: url('http://theclassycreditcardchick.ninjaopinions.com/money.jpg'); width: 100%; height: 1100px; background-size: auto; background-position: top left; background-repeat: no-repeat; filter: drop-shadow(0 8px 8px rgb(64,64,64));">
        <div style="padding: 20px; background-image: linear-gradient(white, ghostwhite); padding-bottom: 150px; box-shadow: 0 8px 8px rgb(128,128,128); opacity: .9; margin: auto; vertical-align: middle;">
            <h1 style="font-size: 3em; text-align: center; margin: 0 auto; margin-bottom: 0; padding-bottom: 0;">Factors That Affect Your Credit</h1>
            <img id="piechart" style="margin: auto; display: block; margin-top: 50px; margin-bottom: 50px;" src="http://theclassycreditcardchick.ninjaopinions.com/pie.jpg" height="500" onclick="window.location.href='pie.jpg'"/>
            <ul style="list-style-type:disc; list-style-position: inside; margin: auto; text-align: justify; color: orange; width: 600px; font-size: 2em; text-shadow: 1px 1px 2px rgb(64,64,64);">
                <li>How your credit score is determined</li>
                <li>What factors influence your credit</li>
            </ul>
        </div>
    </section>
	 <article class="hideme" style="background-image: linear-gradient(rgb(176, 45, 229), rgb(176,45,172)); margin: auto; padding-bottom: 50px;">
        <p id="sectionborder"></p>
        <h2 style="text-align: center; color: whitesmoke; margin-top: 50px; font-weight: bold; font-size: 3em; clear: left; width: 60%; margin: auto; text-shadow: 1px 1px 1px black;">I have a proven system to improve your credit score</h2>
        <p id="sectionborder"></p>
        <h1 id="service" style="color: white; font-size: 3em; text-align: center; font-weight: bold;">Our services can help you with</h1>
        <table class="hideme" style="margin: auto;">
            <tr>
                <th>
                    <ul style="color: whitesmoke; text-align: left; font-size: 2em; font-weight: bold;">
                        <li>Collections</li>

                        <li>Repossessions</li>

                        <li>Evictions</li>

                        <li>Public Records</li>

                        <li>Identity Theft</li>
                    </ul>
                </th>

                <th>
                    <ul style="color: whitesmoke; text-align: left; font-size: 2em; font-weight: bold;">
                        <li>Student Loans</li>

                        <li>Foreclosures</li>

                        <li>Bankruptcy</li>

                        <li>Tax Liens</li>

                        <li>Evictions</li>
                    </ul>
                </th>
            </tr>
        </table>
        <h1 style="color: white; font-size: 3em; text-align: center; font-weight: bold;">And More!</h1>
        <p class="hideme" style="text-align: center; width: 50%; font-size: 2em; margin: auto;">
            Let us help you remove the negative items reporting on your credit report,

            build new credit history, learn the secrets to a perfect credit score &

            how you can get approved for new homes, cars, business loans and more!
        </p>
        <div style="text-align: center; margin-top: 20px; font-size: 1.5em;">
            <button class="hideme" onclick="window.open(
  'https://l.messenger.com/l.php?u=http%3A%2F%2Fwww.ucespp.net%2Ftheclassycreditchick&h=AT1Y90D-Q7FIaHBn_UNDhl_iYYdVT7R5TegfCVgICpDvzf0YRAr5R5tOTCSImCwVpu9vClMxdYS1iIDJGylgWg_2m7mQG8gwn4mDkkOG8j0r_vZ1RdNoXxs_BkOjq_t-6e8t5Q',
  '_blank');")>RESTORE YOUR CREDIT!</button>
        </div>
    </article>

The code uses “margin: auto” many times to allow the content to be centered in the page. The “background-size: auto;” declaration in the <section style””> allows the size of the background to automatically adjust to the window size which is equal to 100% (“width: 100%;”). So the background picture “money.jpg” from “http://theclassycreditcardchick.ninjaopinions.com” will automatically scale according to the full width of the screen you are using. But, the height will remain at a constant 1100 pixels. This allows for the pie chart to remain intact and fully over the money picture.

So, basically the entire image scales perfectly in the background. But, the interesting part is how the table automatically scales the width of the window. I use “margin: auto; text-align: center;” to center the table in the middle of the page. Then, I use a font size that works well for both mobile and PC. Also, I try to stick to a font that works well on all devices to avoid issues that “Comic Sans MS” causes with consistency. So, once the table is correctly aligned in the center of the page, it auto aligns itself because the table is coded by me to be at a 80% width at all times in the center of the page. So, because text automatically aligns, the Bootstrap columns are not needed because the text will just simply wrap itself to the next line.

This way, no matter what device you are using site will not need to remove any features off of the website version. My responsive site is identical to the PC version of the site and works perfectly because of this method. Test it out for yourself! It really works!


Daniel Serrano

I'm a hard working, fun loving and cool guy who's heavily into my job and it's related fields. I love creating great sites and designs and pleasing customers and life is always changing. I find the best way to keep up to the speed of life and its changes is to always have many plans for the future, and if you get knocked down, no worries, hard work can lead to miracles... Never Give Up!