Categories


HTML Tables: How to Insert Colored Bands at Top/Bottom

We’ve discussed how a simple HTML table can offer a lot of variety in laying out a web page. However, there may be times when you’ll want your page to be more than just a simple table centered in the middle of the viewer’s screen. With today’s flat screen monitors having a much larger viewing area, creating a page that doesn’t look lost can easily be achieved.

One way to do this is to use a band of color or background image that spans across the top 100% of the screen. This ‘colored’ space can hold an image, your logo, an advertisement, a banner, or even be left empty to make a style statement. To help balance the page, consider placing a corresponding band along the bottom of the page.

Assuming you already know the basics of writing an HTML table  (get basics here),  let’s look at how to write the code for having a colored band span across the top and bottom of our web page. All HTML code will be in blue.

We begin by looking at the structure of the page. For our very simple page, we’ll use two tables. One placed inside the other.  The image below is how our table will appear on a full screen.

Table 1 will be coded for the whole page and will have an assigned width of 100%. The second table (Table 2) will have a width of 900 pixels, contain our page information and be centered inside of Table 1

The rows of HTML code below are for Table 1 (100% width). This means that regardless of the viewer’s monitor size, the table will fill the screen. We’ve assigned our table a white (#FFFFFF) background. Note: If you do not assign a background color, the background displayed will default to the color assigned in the code for that page.

The section of code starting with

is the first row – first column for Table 1. This is where you would put the color notation or background image that is to span the entire screen along the top. We’ve chosen yellow (#FFFFD2).    (We’ll use tags in the code below to denote table info as we move through the process.)

 

tags to ‘hold the space open’. If you don’t, you will not be able to see the band. The space can be held by using any characters where the font color is the same as the background, rendering it invisible. You can also use the special character,   (empty space) followed by as many
tags to get the desired height. There are other ways to format but for now this is all we’ll cover.

The next set of

(see code below). 

We’re now ready to insert the third row of Table 1. This third row is where we will place our second band of color that spans the screen at the bottom.

To do this, we use

 

COLORED AREA ACROSS COMPLETE TOP OF PAGE

You can put a logo, advertisement or anything else here.

 

NOTE: IF you do not place text or an image inside the top row, but only use a color or background image, you will need to place something in the area between the

code is to end the first row/column and begin the second row/column of Table 1.

Now that we’ve opened our second row in Table 1, we want to insert a complete table there (Table 2). This simple table (1 row, 1 cell) will hold the page’s content. Note that we have centered the table and have limited its width to 900 pixels. Also, in order for the table to display correctly inside the first table (Table 1), it must be totally self-contained, i.e, have beginning and ending

and  
tags. To show separation of the sections, Table 2 has a blue background. Note: The space on either side of Table 2 is white. This is because of the background color assigned to the first table. 

 

 

THIS IS THE BODY OF THE PAGE.

 

Here you can put the remainder of information

or insert another table.

While the code above ends Table 2, we still need to end the second row and column for Table 1. This is done by using

. Since this row refers back to Table 1 which has a width of 100%, we do not need to make any notations regarding width. However, we will again need to reference color or background image to be used.

 

COLORED AREA ACROSS COMPLETE BOTTOM OF PAGE

 

Use for links, website policy, terms and conditions, etc.

 

 

Our table with colored bands – top and bottom is complete.

Helpful Tip: If you are having trouble with the layout of your table’s rows and cells, add the border=”1″ attribute into the

tag. This will allow you to see the layout for the rows and columns. Once you get corrections made, remove the “border=1” feature.

There are so many different ways to configure tables, rows and cells that it would be impossible to cover them all in this post. For additional, easy to understand lessons in HTML, get the Quick Study Guide by Elizabeth Castro – HTML, XHTML, and CSS, Sixth Edition.


Comments are closed.