If you’re new and just learning website design for beginners, HTML tables can help you create a jam-up web page with structure and flavor.
In fact, there are quite a few tricks with HTML tables and these applications can really jazz up your design.
One such trick is the method of using a very small image in a middle column and/or row to create a white or other colored border between two colored rows or columns.
HTML for Beginners – Create Colored HTML Tables Featuring White Borders
How Wide Should HTMLÂ Tables Be?
One thing you’ll notice right away about HTML tables is the column or row won’t show up if it’s less than 5 pixels wide unless you put some sort of text or an image within that table.
Therefore, if you want to create two wide columns with a very narrow column (only 1 to 3 pixels) in between as a border, it will only work if you insert something into that particular column.
Making it 5 pixels will likely be too wide for most purposes.
Create a transparent image that’s only 1×1 pixel.
Insert this image into the column or row that you wish to use as the border.
Make the image white, or the exact same color as the column or row if you need a different color for the border.
To do this, you’ll need to copy the color code of the row/column from your HTML editor and then create an image that matches the exact color code.
It’s a simple process, but can help you make a great looking page with unique HTML tables for a variety of functions.
*Tip: The image can be made slightly larger (up to 5 pixels) if you need a thicker border.
Keep in mind that you’re not actually creating a “border” but using additional rows/columns within a table to give the appearance of a border.
By adjusting the size of the actual row/column, then you’re adjusting the border’s width as well.
What Else Can You Use HTML Tables For?
These tables can be used in a variety of ways to build a web page’s layout. Insert menus, main content, images, etc. into tables.
Create tables to format multi-column or multi-row designs for lists.
Use them to insert multiple products with images and descriptions onto one web page.
Also, HTML tables are often used to create spacing between the page’s different sections to prevent the content and images from running together.
This tutorial from the web design course introduces one little image trick which can help you achieve an amazing look and feel for your page.
And, your site viewers will think you’re featuring an image when it’s really just HTML tables!
Give it a try and keep your small 1×1 pixel images handy for various design needs throughout your years as a site owner or web designer. Ready to learn more about HTML tables and web designing?
