Thursday, August 23, 2012

Using HTML tables to format the Web page


Designing a professional looking web site involves much more than just display the text between the body tags. In order to organize your page, use the tables.

A table is an HTML element, also referred to as a "tag", and is used to display the web page content in an organized manner.

The page can be set in columns and rows, you can display the table cells, with or without borders, and you can also have a background color or image fantasy.

Tables can be used in an unlimited number of ways including:

Ø Plan your text and images

o Display the text in a newspaper format

Add or colored backgrounds and images for text areas

or viewing graphic

If you've never designed a web page, your first step will be to learn some basic HTML. You can find a tutorial for beginners to the NCSA Beginner's Guide to HTML:
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

When you start designing your web page, you may consider placing all of the content page within a table. This will allow you to adjust your table's cellspacing to keep your text to appear too close to the left edge of the page. The higher the cellspacing value, the farther from the left edge of the text will be displayed. In addition, the tables will allow you to view the content of the page in rows and columns, rather than one large block
text.

The tables are created with the tag. The start tag of the code table and the table end tag.

In addition to the table tag, you must also specify the number of rows and columns of the table will contain. To do this, you must use the tag, which specifies the beginning of a row of the table and the tag, which will display the table data. The tag must be placed in front of all the information you want to be displayed within a cell. The tag closes the cell. All these tags will be inserted between the tags.

Table Basic structure:

Content

If you are just starting out, you should use a simple table format that displays the navigation links on the left or right side of the page and the text and other information on the rest of the page - in two columns.

When working with tables, be sure to create the tables with an edge. This will allow you to see exactly where the boundaries are so that you can be sure that everything is displayed correctly. Once the page is complete, you can remove the border.

The following code table to create the basic layout for a web page with two columns. The first column will run for 20% of the viewers screen. The second will have a duration of 80% - for a total
of 100%.

-

-

Note the width of the table is set to 100%? This width will see the table screen 100% of the audience. The cellspacing and cellpadding are set to 10 so that the text will not be displayed to the left edge of the page, and there will be some space between cells.

Once you have the basic page layout finished, you can begin adding your content. The first step is to delete the placeholder -. The placeholders were placed between the tags and to enable the borders to display - empty table cells are not displayed within a web browser.

Your logo and navigational links should be displayed in the left column, which is the smaller of the two columns. All page content is placed inside the column.

Keep in mind, the top left corner of the web page not only be used to display the logo, but must also contain your most important keyword phrase. Make sure you include a display of images alt tag your keyword phrase within the code image.

To make your page, you can create additional tables with background colors and borders to divide content into sections.

All text and additional tables will be included in the -. Just substitute the - text content and code tables.

For example, the following table can be used to display an introduction to the product, articles, reviews or anything else he wants.

Keep in mind, you do not want all the information on the main page. The key is to include highlights of your site on the main page with a link for more information.

The connection example at the bottom of the table can be used to direct visitors of information. You can use the colors of your choice and adjust the width to suit your needs.

The table heading

your text here

Link to a further
Information

Keep in mind when displaying text within each cell of the table, to specify a specific font, you should use a font tag within each table cell.

After you have completed your web page, be sure to remove the table border. That's all there is to it.

If you are unsure of your ability to design a professional looking web site, Template Monster offers a wide variety of site templates highly professional.
http://www.templatemonster.com

If you need a professional logo, Gotlogos will design a logo for your wonderful site for only $ 25. http://www.gotlogos.com

Take your time and test different table designs. Try adding new rows and columns and change the background color and border. The more you practice the better.

Gook luck with your new site! ......

No comments:

Post a Comment