111 - TABLE
Table Basic Tags

       


<HTML>
<HEAD>
<TITLE>
111 - TABLE
</TITLE>
</HEAD>

<BODY BACKGROUND="BGWite.jpg">

<P> <B> TABLE BASIC TAGS </B>

<P>
<TABLE BORDER=1>
   <TR>
     <TD>
     Table with 1 cell
     </TD>
  </TR>
</TABLE>
<!--------------------------------------Description of the Tags
The tags <TABLE BORDER=1> and </TABLE> limit the table.
The attribute BORDER=1 is essential if no color background is
specified. Table color background is to be discussed further on.

The tags <TR> and </TR> (Table Row) define one line of
cells (Tags <TD> and </TD>). Between a pair of tags
TR may be placed several pair of tags TD. In this case, as only
one pair of TD was specified the table has only 1 cell.

The tags <TD> and </TD> (Table Data) define a cell.
The number of pairs of tags TD between a pair of tags <TR>
and </TR> defines the number of cells in the row.
Between a pair of tags <TD> e </TD> should always
have some text or a "non-break-space" that is typed: &nbsp;
(including the semicolon) as a special character of HTML.
------------------------------------------------------------>

<P> Table with 2 cells in a row:

<TABLE BORDER=5>
   <TR>

     <TD>
     Cell Row 1 Col 1
     </TD>

     <TD>
     Cell Row 1 Col 2
     </TD>

  </TR>
</TABLE>
<!-----------------------------------------------Remarks
In this case there are 2 pairs of <TD> and </TD>
between the row tags <TR> and </TR>.
The above tags have been typed with a large vertical spacing
only for didactic purposes. In commom practice this spacing is
not necessary. However the horizontal indentation of the tags,
though not mandatory, are of great importance in designing and
maintaining any table.

Note the TABLE attribute BORDER=5
-------------------------------------------------------->

<P> Table with 2 cells in each of 2 rows:

<TABLE BORDER=3>

   <TR>
     <TD>
     Cell Row 1 Col 1
     </TD>
     <TD>
     Cell Row 1 Col 2
     </TD>
  </TR>

   <TR>
     <TD>
     Cell Row 2 Col 1
     </TD>
     <TD>
     Cell Row 2 Col 2
     </TD>
  </TR>

</TABLE>
<!-----------------------------------------------Remarks
I this case there are 2 pairs of tags <TR> e </TR>
between the tags <TABLE BORDER> and </TABLE>,
defining two rows.
Each pair of tags TR has 2 pairs of tags TD.

Note the TABLE attribute BORDER=3
---------------------------------------------------------->

</BODY>

</HTML>

 

How to test the home page above:

[1] Copy the codes from <HTML> to </HTML> into a new file using the Windows Notepad or a HTML editor.

[2] Save the file with whichever name but with the extension .htm or .html in a computer folder (suggested name for the folder: BasicHTML) specially created for holding this course test files.

Suggestion for the name of the file: AATestXXX.htm where XXX is the number at the top of this screen. The double "A" will put the file name at the top of the list in the folder, making it easier to locate.

[3] Open the file by means of any browser to get the following home page, supposing it has been made the download of the file BGWite.jpg as required in the Lesson 104:

Note the following remarks:

  1. Important Rule: Each pair of tags TR (Table Row) must have the same number of pairs of tags TD (Table Data) otherwise the table will be deformed.

  2. Within the pair of tags TD it is allowed to format text, insert images, edit links and set background colors (see further on). A cell may be regarded as a mini-home-page inside a big one.

  3. One cell tables are very often used with the attribute BORDER=0 and a table background color (see further on) to open frames in which text, images and links may be highlighted against the background of the home page set by the tag BODY.
    Example:
    The Introduction of this course is a one cell table, but with BORDER=1.

  4. Also, there are the tags <TH> e </TH> (Table Header) that have the same requirements and may replace the tags <TD> and </TD> but automatically display their contents in bold characters and horizontally centered inside the cell.

    They are optionally used to design the table's:
    HORIZONTAL HEADERS: <TH>s replacing all <TD>s inside the first pair of <TR> of the table.
    VERTICAL HEADERS: <TH>s in the place of the first <TD> of each pair of <TR> (Pairs of <TD>s are used thence).

    Example:
    The big letters below used for the <TH>s are only to to highlight these tags.

<HTML>
<HEAD>
<TITLE>
111 - TABELAS
</TITLE>
</HEAD>

<BODY BACKGROUND="BGWite.jpg">

<P> <TABLE BORDER=1 WIDTH=450>

   <TR>
     <TH>
     Cell Row 1 Col 1
     </TH>
     <TH>
     Cell Row 1 Col 2
     </TH>
     <TH>
     Cell Row 1 Col 3
     </TH>
   </TR>

   <TR>
     <TH>
     Cell Row 2 Col 1
     </TH>
     <TD>
     Cell Row 2 Col 2
     </TD>
     <TD>
     Cell Row 2 Col 3
     </TD>
   </TR>

</TABLE>

</BODY>

</HTML>

 

Updated Aug/2000 by