Creating Tables

Basic Tables

Tables are a great way to dress up the page. Tables allow the web master to display graphics and text like a newspaper column in a newsletter. A table is very similiar to a spreadsheet in that tables are composed of rows and columns. Each cell created can contain graphics, text or both.

The three elements that make up a table are:

<Table>; <TR> and <TD>

All three of which require a closing tag

The table is defined between the <TABLE> and </TABLE>. The two other codes set up the cell arrangement in the row/column format. A table may contain only one cell or many cells and rows. We have a three cell, one row table at the bottom of this page.

For each row within the table the <TR> tag must be used.

Each cell is defined with the <TD> tag or the Table Data tag

Our three cell table at the bottom of this page consists of the following code.


<CENTER>
<TABLE BORDER="1">
<!--This is the begining of the row 1 for this table -->
     <TR>
          <!--Each cell begins with a TD tag -->
          <TD><A HREF="reqinf.htm"><IMG SRC="cylarrw.gif" BORDER=0 HEIGHT=31 WIDTH=31></A></TD>
          <TD><A HREF="index.htm">Home</A></TD>
          <TD><A HREF="target.htm"><IMG SRC="cyrarrw.gif" BORDER=0 HEIGHT=31 WIDTH=31></A></TD>
     </TR>
</TABLE>
</CENTER>

Note: Notice how I indented the TR and TD. This makes reading the code later much easier. Also with each cell on the page on a different line, we can more easily tell which cell contains what data.



The border around the table is controlled by the BORDER="X". To make the border thicker, just increase the number. For no border set BORDER="0". By default, if no border=X attribute is used, the table will not have a border.

As with our example and the table below, any HTML tag can be used in combination with either text or graphics to create any number of "effects".

Table Headers

Table headers can be used with multi-row tables to "title" a column within the table. Headers are usually associated with the first row of a table. The code for a header is:

<TH> Text </TH>

This code will display the header text in a emphasized font.


<CENTER>
<TABLE BORDER="1">
<!-- This is the begining of the row 1 for this table -->
     <TR>
          <!-- Each header cell begins with a TH tag -->
          <TH> Left Arrow </TH>
          <TH> Link to Home page </TH>
          <TH> Right Arrow </TH>
     </TR>

     <TR>
          <!-- Each cell begins with a TD tag -->
          <TD><A HREF="reqinf.htm"><IMG SRC="cylarrw.gif" BORDER=0 HEIGHT=31 WIDTH=31></A></TD>
          <TD><A HREF="index.htm">Home</A></TD>
          <TD><A HREF="target.htm"><IMG SRC="cyrarrw.gif" BORDER=0 HEIGHT=31 WIDTH=31></A></TD>
     </TR>
</TABLE>
</CENTER>


The code above gives a table like this. Notice that the table looks nice but we have an alignment problem with the graphics and the text in the middle and right cells.
Left Arrow Link to home page Right Arrow
Home



Aligning text and graphics in the cell

The ALIGN code can be used with the TD tag. Possible values are left, center and right. The text or graphic can be aligned verticallly by using VALIGN code. Possible values are top, middle or bottom. So to correct our table below, use the following:


<CENTER>
<TABLE BORDER="1">
<!-- This is the begining of the row 1 for this table -->
     <TR>
          <!-- Each header cell begins with a TH tag -->
          <TH> Left Arrow </TH>
          <TH> Link to Home page </TH>
          <TH> Right Arrow </TH>
     </TR>

     <TR>
          <!-- Each cell begins with a TD tag -->
          <TD ><A HREF="reqinf.htm"><IMG SRC="cylarrw.gif" BORDER=0 HEIGHT=31 WIDTH=31></A></TD>
          <TD ALIGN=MIDDLE><A HREF="index.htm">Home</A></TD>
          <TD ALIGN=RIGHT><A HREF="target.htm"><IMG SRC="cyrarrw.gif" BORDER=0 HEIGHT=31 WIDTH=31></A></TD>
     </TR>
</TABLE>
</CENTER>


The result:

Left Arrow Link to home page Right Arrow
Home



By using line breaks and some of the other HTML tags, different text effects can be accomplished. Play around and see what can be accomplished.

For some additional information on tables, checkout this site Jump Start




Home