How to Create Colored HTML Tables Featuring White Borders

Mar 19, 2012, by admin

If you’re new and just learning HTML for beginners, tables can help you make 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 technique 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.

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 exact column. Making it 5 pixels will likely be too wide for most purposes.

Create a translucent 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.

Using HTML Tables

HTML 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, tables are often used to create spacing between the page’s dissimilar sections to prevent the content and images from running together.

This tutorial from the web design course commences 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.