View With Graphics
 HTML for Starters
 Lists for Starters
 HTML for People Who Want to Learn  --  Tables for Starters

Tables for Starters

Tables are extremely useful for Web-page builders. Not only can tables be used to tabulate data and information, but they can also be used "behind the scenes" to help the builder design the layout of the page. Underneath this paragraph you see a table being used to display tags, and above this paragraph a borderless table was used to arrange the graphics.

 

Table Elements

This table lists all of the tags used to create a table. Look over the table, then look at the following example to get a better understanding of how to create a table.

 
Table Attributes on the next page will show you how to change the defaults.
Table Elements
 
Element Description
<TABLE> ... </TABLE>
 Defines a table in HTML and contains the following elements. By default, a table has no visible border.
<CAPTION> ... </CAPTION>
 Defines the caption for the table. The default postion of the caption is centered above the table.
<TR> ... </TR>
 Specifies a Table Row. Contains the <TH> and <TD> tags. You may define default attributes for the entire row.
<TH> ... </TH>
 Defines a Table Header cell. Normally contains a heading of the table. By default the content of the cell is bold and centered.
<TD> ... </TD>
 Defines a Table Data cell. Contains the data displayed in the table. By default the content of the cell is aligned left and centered vertically.

 

 

Creating a Table

Now you are ready to take a stab at creating a table. Study this example to see how a table is created. You may want to take another look at Table Elements after looking at the example.

 

Making a Table

In this example, you are shown how to make the table you see below, a basic table with two columns and three rows.

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language


<TABLE>

Start the table


<TABLE>
<CAPTION>Markup Languages</CAPTION>

The caption is optional. You probably won't see it used often.


<TABLE>
<CAPTION>Markup Languages</CAPTION>
<TR>

Specify a horizontal row in the table.


<TABLE>
<CAPTION>Markup Languages</CAPTION>
<TR>
<TH>Acronym</TH>
<TH>Full Name</TH>

Make the headings for the table. This tag is also optional.


<TABLE>
<CAPTION>Markup Languages</CAPTION>
<TR>
<TH>Acronym</TH>
<TH>Full Name</TH>
</TR>
<TR>

Close the first row and start another row.


<TABLE>
<CAPTION>Markup Languages</CAPTION>
<TR>
<TH>Acronym</TH>
<TH>Full Name</TH>
</TR>
<TR>
<TD>SGML</TD>
<TD>Standard Generalized Markup Language</TD>

Enter the contents of the cells in the second row.


<TABLE>
<CAPTION>Markup Languages</CAPTION>
<TR>
<TH>Acronym</TH>
<TH>Full Name</TH>
</TR>
<TR>
<TD>SGML</TD>
<TD>Standard Generalized Markup Language</TD>
</TR>
<TR>

Close the second row and start a third row.


<TABLE>
<CAPTION>Markup Languages</CAPTION>
<TR>
<TH>Acronym</TH>
<TH>Full Name</TH>
</TR>
<TR>
<TD>SGML</TD>
<TD>Standard Generalized Markup Language</TD>
</TR>
<TR>
<TD>HTML</TD>
<TD>Hypertext Markup Language</TD>

Enter the contents of the cells in the third row.


<TABLE>
<CAPTION>Markup Languages</CAPTION>
<TR>
<TH>Acronym</TH>
<TH>Full Name</TH>
</TR>
<TR>
<TD>SGML</TD>
<TD>Standard Generalized Markup Language</TD>
</TR>
<TR>
<TD>HTML</TD>
<TD>Hypertext Markup Language</TD>
</TR>
</TABLE>

Close the third row and close the table.

 

The Result

This is the table that you get from the example, centered for presentation.

 

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language

 

The table in this example is not very impressive, is it? On the next page you will learn the attributes for table tags, and then see how to add them to this table.

 

Default Cell Width

Markup Languages
Acronym Full Name
SGML Standard Generalized Markup Language
HTML Hypertext Markup Language
This table has a border so you can see each individual cell. Notice that the width of the cells is determined by the widest cell in the column.

 

Tell me about the attributes! --->     

 

HTML Help Bulletin Board
Ask a question about how to do something with HTML.  Maybe you can answer someone else's question.

 

Home
 New
 E-mail
 Links
 Next

Last Modified: Saturday, 18-Jul-98 21:52:50 PDT
Page URL: http://geocities.datacellar.net/SiliconValley/Vista/2823/text/tables.html

1