HTML Basics - Page three of Learn HTML Basics will show you exactly how you can learn to create your own basic html web page.

Learning HTML - Page four of Learn HTML Basics aims to teach one of the more complicated portions when learning the basics of html, which is adding links.

HTML Table Tutorial – Learning the basics of HTML

HTML Table Tutorial

If you are embarking on a project to start your own Web site, you should know that the use of HTML tables will make your business or personal venture thrive.

Reference any professionally produced Web site and you will find that the most successful sites use many HTML tables to draw the browser’s attention. It is identical to using colorful graphics and charts as part of a report to highlight the nuts and bolts of your presentation.

Most Web sites utilize invisible HTML tables to divide the page into different sections. HTML tables can be used to create headers, menus and forms. They are also valuable for text and alignment of photos to create an organized display.

HTML tables put the fun into designing your Web page. The HTML table allows designers to arrange their data into columns and rows of cells. Each box within the HTML table is called “cells.” The data in these cells can include text, preformatted text, links, images, form fields, forms and other tables.

HTML Table Elements

TABLE – Denotes the range of the HTML table and uses attribute to define properties of the table.

BORDER – An attribute that indicates the size of the border that is drawn around the HTML table and between the cells.  

CAPTION – Defines the HTML table’s purpose. It can take only one attribute, which is ALIGN.

ALIGN – Defines where the caption should be placed. Possible values are “center”, “top”, “bottom”, “left” or “right.”

TR – Defines an HTML table row. Depending on your design, an HTML table consists of any number of rows. Each row contains cells defined by table data (TD) or table header (TH) elements. TD or TH elements define how many columns are in the HTML table. TR indicates the number of rows. Each row should contain the same number of cells; otherwise the alignment will be off.

HTML Table Example

Following is a simple HTML table example with 2 rows and 3 columns:

 <TABLE BORDER = “2”>

<caption align=“top”> Family birthdays</caption>

<TR><TH> Name <TH> Relation <TH> Birthday </TH></TR>

<TR><TD> Joe </TD> <TD> Brother </TD>  <TD> 7/31/67 </TD></TR>

<TR><TD> Mary </TD> <TD> Sister </TD>  <TD> 2/11/70 </TD></TR>

</TABLE>

You should have a nifty HTML table that includes a border and the data neatly displayed to show the birthdays of the brother and sister. Here is what it should look like:

Defining the HTML Table Example

End tags – You notice that </caption>, </TR>, </TH>, </TD>  and </TABLE> were used in the HTML table example. With many browsers the formatting of the table will be affected if these end tags are omitted. You should always use end tags especially when you design a table within another table.

Defaults – By default, a table is drawn without a border, so the HTML table designer must include the BORDER attribute to draw the lines. Also by default, a table is flush with the left margin. Use the ALIGN attribute for desired HTML table layout. If you want the table to be centered, input <TABLE ALIGN  = “center”>.

This is a basic tutorial of an HTML table design. Needless to say, the production of a full-scale HTML table design incorporates much more attributes. If you can perfect these basics, that will lead your productivity to a new level. Similar to how an artist works his sketch before laying the paint, this basic knowledge of HTML tables is a start toward building your ideal Web site.

Latest HTML Tutorial Articles:

HTML DIV Tutorial - The definition of the HTML <div> tag is that it divides the HTML document into sections. The following tutorial will explain why the <div> tag is important and how it should be used. Proper usage of the <div> tag is fundamental to good HTML coding; the <div> tag is one of most powerful tools available to a Web developer...

HTML MySpace Tutorial - MySpace, one of the leading social networking websites on the internet, grows by leaps and bounds. For those that are new to the MySpace circle, there are several things that must be learned to enjoy all that it has to offer. HTML is a series of codes that are used to create website pages on MySpace, as well as change the features that are displayed. For a simple and easy to understand HTML MySpace tutorial, a MySpace account should first be created. This can be done by signing up for a free account on the website. Once an account is established and the user is logged in, the HTML changes can come into play. With MySpace there are numerous HTML codes that are used for such features as leaving comments, changing pictures, and uploading graphics for backgrounds...

HTML Frame Tutorial - The use of frames may not be as prevalent in HTML design as it once was, but it is still a worthy form of organizing your Web site and making it easy to navigate. Dividing a page using frames (called a frameset) allows the visitor to view more than one page at a time without cluttering the screen. Each frame is its own Web site and can be viewed independently in a separate window. The use of frames can be a dynamic way to get the most visual aspect out of your Web site. For example, the banner frame can be used for a business logo along with the company name. The index frame, on the left side of the screen, can be used as a table of contents, or as a place to link to other Web sites. The home frame will contain all the primary contents of the site, whose data changes each time the visitor clicks on a link. The footer frame...

HTML Table Tutorial - If you are embarking on a project to start your own Web site, you should know that the use of HTML tables will make your business or personal venture thrive. Reference any professionally produced Web site and you will find that the most successful sites use many HTML tables to draw the browser’s attention. It is identical to using colorful graphics and charts as part of a report to highlight the nuts and bolts of your presentation. Most Web sites utilize invisible HTML tables to divide the page into different sections. HTML tables can be used to create headers, menus and forms. They are also valuable for text and alignment of photos to create an organized display...