HTML for Beginners - Create
Colored HTML Tables Featuring White
Borders
If you're new and just
learning HTML
for beginners, 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.
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 1x1 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.
How Can You Use 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 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 1x1 pixel
images handy for various design needs throughout
your years as a site owner or web
designer.
