School of Information Technology
Illinois State University

HTML TAGS

Most documents have common elements, such as, titles, paragraphs, and lists. These elements are identified in HTML through the use of tags. Everything that is not an HTML tag is part of the document content. With a few exceptions, HTML does not allow you to describe the exact appearance or layout of a document. The designers of HTML did this on purpose. Why? Because you don't know the capabilities of the computer that is going to display the document, i.e. the size of the screen, the fonts that are installed, etc. By separating the structure of a document and its appearance, a browser program that reads and interprets HTML can make formatting decisions based on the capabilities of the end user's computer.

Most HTML tags are used in pairs, that is, HTML tags generally have a beginning tag and an ending tag surrounding the text that they affect, e.g. 

       <TagName>the affected text</TagName>
The tag name itself (here, TagName) is enclosed in brackets (< >).

The beginning tag "turns on" a feature (such as headings, bold, etc.), and the ending tag turns it off. Closing tags have the same name as the beginning tag except that the closing tag name is preceded by a slash (/). For example, the following <STRONG> tag will make the word basic in the following sentence bold when displayed by a browser. 

        This is a <STRONG>basic</STRONG> tag tutorial.
will be displayed as: 
        This is a basic tag tutorial.
Not all HTML tags have a beginning and an end. Some tags are only one-sided, such as the <LI> tag for an element in a list.

All HTML tags are case-insensitive; that is, you can specify them in upper or lower case, or in a mixture. <STRONG> is the same as <strong> or <STrong>. It is common practice, however, to specify all tags in uppercase because they are easier to spot when editing an HTML document.

The following sections describe the use of commonly used HTML tags. If HTML is new to you, I suggest that you read each section in sequence. If you are interested in learning about a particular feature then you can use one of the following links.

LINKS TO TOPICS
ADDRESS Anchors - Creating Links BASEFONT
BLOCKQUOTE - Extended Quotations BODY Bold
BR - Line Break CENTER Comments
FONT FORM HEAD
Headings HR - Horizontal Rule HTML
IMG SRC - Images Italics Lists - UL, OL, and DL
MAILTO: MAP - Image Maps Paragraphs
PRE - Preformatted Text Sounds and Animations Special Characters
TABLE TITLE Troubleshooting

TABLE

Before HTML tags for tables were formulated, authors had to carefully format their tabular information within <PRE> tags, counting spaces and previewing their output. Tables are very useful for presentation of tabular information as well as a boon to creative HTML authors who use the table tags to present their regular Web pages.

Think of your tabular information in light of the coding explained below. A table has headings where you explain what the columns/rows include, rows for information, and cells for each item. In the following table, the first two rows contain the heading information, each detail row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function.

Table Elements

Element Description
<TABLE> ... </TABLE> defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border.
<CAPTION> ... </CAPTION> defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.
<TR> ... </TR> specifies a table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information.
<TH> ... </TH> defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.
<TD> ... </TD> defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

Table Attributes

NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>.
Attribute Description
  • ALIGN (LEFT, CENTER, RIGHT)

  • VALIGN (TOP, MIDDLE, BOTTOM)

  • COLSPAN=n

  • ROWSPAN=n

  • NOWRAP
  • Horizontal alignment of a cell.

  • Vertical alignment of a cell.

  • The number (n) of columns a cell spans.

  • The number (n) of rows a cell spans.

  • Turn off word wrapping within a cell.

 

General Table Format

The general format of a table looks like this: 
<TABLE>                                     <== start of table definition

<CAPTION> caption contents </CAPTION>       <== caption definition



<TR>                                        <== start of first row definition

<TH> cell contents </TH>                    <== first cell in row 1 (a head)

<TH> cell contents </TH>                    <== last cell in row 1 (a head)

</TR>                                       <== end of first row definition



<TR>                                        <== start of second row definition

<TD> cell contents </TD>                    <== first cell in row 2

<TD> cell contents </TD>                    <== last cell in row 2

</TR>                                       <== end of second row definition



<TR>                                        <== start of last row definition

<TD> cell contents </TD>                    <== first cell in last row...

<TD> cell contents </TD>                    <== last cell in last row

</TR>                                       <== end of last row definition

</TABLE>                                    <== end of table definition
The <TABLE></TABLE> tags must surround the entire table definition. The first item inside the table is the CAPTION, which is optional. Then you can have any number of rows defined by the <TR>...</TR> tags. Within a row you can have any number of cells defined by the <TD> ...</TD> or <TH>...</TH> tags. Each row of a table is, essentially, formatted independently of the rows above and below it. This lets you easily display tables like the one above with a single cell, i.e. Table Attributes, spanning columns of the table.

Centering Tables

You can also use CENTER to center TABLEs -- in fact, this is currently the only way you can do so. For example: 

     <CENTER>

     <table border>

     <tr>

     <td>here is a single-celled table!</td>

     </tr></table>

     </CENTER>
displays this:

here is a single-celled table!

Nested Tables

The cell of a table can contain other HTML tags including another table. A table contained within another table is called a nested table. For example, 

     <TABLE WIDTH="100%" BORDER>

     <TR>

     <TD>



     ...outer table...



         <TABLE WIDTH="100%" BORDER>

         <TR>

         <TD>



         ...inter table...



         </TD>

         </TR>

         </TABLE>



      </TD>

      </TR>

      </TABLE>
would be displayed as:

...outer table...
...inter table...

Tables for Nontabular Information

Some HTML authors use tables to present nontabular information. For example, because links can be included in table cells, some authors use a table with no borders composed of a number of images. Displayed as cells of a table, several images appear to be a single large image. Browsers that can display tables properly show the various images seamlessly, making the created image look like an image map (one image with hyperlinked portions).

Using table borders with images can create an impressive "windowed" display as well. Specify CELLSPACING=0, CELLPADDING=0 and BORDER=0 explicitly for seemless images and specify a border greater than zero for a picture frame effect. Experiment and see what you like.

The following image of a map of downtown Paris is actually four images displayed in a table with two rows of two columns each. Each image links to a larger image for that quarter of the map.

The HTML for the table is: 

      <CENTER>

      <TABLE border=0 cellpadding=0 cellspacing=0>

      <TR>

      <TD><a href="./images/cite_nw.jpg"><img src="./images/cite_nw_sm.jpg" 

          WIDTH= "180" HEIGHT="120" border=0></A></TD>

      <TD><a href="./images/cite_ne.jpg"><img src="./images/cite_ne_sm.jpg" 

          WIDTH= "180" HEIGHT="120" border=0></A></TD>

      </TR>

      <TR>

      <TD><a href="./images/cite_sw.jpg"><img src="./images/cite_sw_sm.jpg" 

          WIDTH= "180" HEIGHT="120" border=0></A></TD>

      <TD><a href="./images/cite_se.jpg"><img src="./images/cite_se_sm.jpg" 

          WIDTH= "180" HEIGHT="120" border=0></A></TD>

      </TR>

      </TABLE>

      </CENTER>

 
Another use of a TABLE is to display text with white space on both the left and right to create margins. For example, the following will place the page content in the center 80% of the page. 

      <TABLE WIDTH="100%">

      <TR>

      <TD WIDTH="10%"></TD>

      <TD WIDTH="80%">

      ...page content...

      </TD>

      <TD WIDTH="10%"></TD>

      </TR>

      </TABLE>

Finally, a table can be used to align text with the middle of an image as indicated above. For example, to place an image on the left and text to the right, create a table with one row and two columns. Display the image in the first column and the text in the second. The browser will center the text in the table cell which will align it with the middle of the image.

Continue =>

Last updated on