HTML: Table Tag

Author: Ronald S. Holland
at
Total Application Works




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2013 All Rights Reserved Total Application Works


    Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/tables.html">
    Table Tags </a>
    </table>
    </body>
    </html>




How to create a HTML Table

The purpose of this tutorial is to show you how to write a HTML Table. I find that the table is one of the most powerful tools for Web page design. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. In the following example, we will show you the code for our page that uses out Table tag. What is a table? A HTML Table is defined using the <Table> tag. A table is divided into a rectangle of horizontal rows (using the <tr> tag) and vertical columns, where each column is defined using the <th> or <td> tag. Each row/column segment is called a data cell. The letters th stands for "table header", and td stands for "table data." Either <th> or <th> can be used to define a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. What is the purpose of using tables?

  • One of the most obvious applications of tables is to organize tabular information, such as an address book or a list of catalog items.
  • If you consider the example of an address book, you will see a more complex relationship between the data in the cells in a row that the use of tables can provide.
  • Tables can be used to draw borders around a row/column or data cell.
  • Tables are the answer whenever you need complex relationships between multiple columns of text.
We will explore the basics of defining a table in the next section.

Defining a basic table

To make a basic table, we start with the <table> tag and end with the </table> tag. Once the <TABLE> tag is in defined, the next thing we need is the <TR> tag. The <TR> tag creates a table row, which contains one or more columns/cells of information. To create these individual cells, you use the <TD> tag. <TD> stands for table data; you place the table information within the <TD> and </TD> tags. An example of a basic table definition looks like:

<table>
<tr>
<td> row 1, column 1 </td>
<td> row 1, column 2 </td>
<td> row 1, column 3 </td>
<td> row 1, column 4 </td>
</tr>
<tr>
<td> row 2, column 1 </td>
<td> row 2, column 2 </td>
<td> row 2, column 3 </td>
<td> row 2, column 4 </td>
</tr>
<tr>
<td> row 3, column 1 </td>
<td> row 3, column 2 </td>
<td> row 3, column 3 </td>
<td> row 3, column 4 </td>
</tr>
<tr>
<td> row 4, column 1 </td>
<td> row 4, column 2 </td>
<td> row 4, column 3 </td>
<td> row 4, column 4 </td>
</tr>
</table>
Figure 1: Definition of a basic table


When the table definition in Figure 1 is displayed in a browser, it looks like:

row 1, column 1 row 1, column 2 row 1, column 3 row 1, column 4
row 2, column 1 row 2, column 2 row 2, column 3 row 2, column 4
row 3, column 1 row 3, column 2 row 3, column 3 row 3, column 4
row 4, column 1 row 4, column 2 row 4, column 3 row 4, column 4
Figure 2: Displaying a basic table


The Figure 2: table in has four rows and four columns.

How to write a Table with Borders

I cheated in the Figure2: example. I used the <Table border> attribute to attain more display clarity. This clarity is in the form of a border around the table and the table cells. The definition looks like:

<table border=4>
<tr>
<td> row 1, column 1 </td>
<td> row 1, column 2 </td>
<td> row 1, column 3 </td>
<td> row 1, column 4 </td>
</tr>
<tr>
<td> row 2, column 1 </td>
<td> row 2, column 2 </td>
<td> row 2, column 3 </td>
<td> row 2, column 4 </td>
</tr>
<tr>
<td> row 3, column 1 </td>
<td> row 3, column 2 </td>
<td> row 3, column 3 </td>
<td> row 3, column 4 </td>
</tr>
<tr>
<td> row 4, column 1 </td>
<td> row 4, column 2 </td>
<td> row 4, column 3 </td>
<td> row 4, column 4 </td>
</tr>
</table>
Figure 3: Definition of a basic table


When the table in figure 3: is displayed by your browser, it looks like the table in Figure 2. By using the border attribute, we define the width in pixels of the border. Border=4 defines a width of four pixels.

Table: Caption Attribute

The Table: Caption Attribute allows the designer to create a title for each table. This is a nice feature; however, I prefer to use another table row (tr) to create titles for my tables. In the following example, I will show both.



<table border>
<tr>
<CAPTION>Team Members for 5-Person Basketball</CAPTION>
</tr>
<tr>
<th>Knicks</th>
<th>Spurs</th>
<th>Lakers</th>
<th>Hornets</th>
</tr>
<tr>
<td>Jamal Crawford </td> <td>Tim Duncan </td> <td>Kobe Bryant </td> <td>Chris Paul </td>
</tr>
<tr>
<td>Eddy Curry </td> <td>Manu Ginobili </td> <td>Lamar Odom </td> <td>David West </td>
</tr>
<tr>
<td>Nate Robinson </td> <td>Tony Parker </td> <td>Derek Fisher </td> <td>Tyson Chandler </td>
</tr> <tr>
<td>Quentin Richardson </td> <td>Bruce Bowen </td> <td>Pau Gasol </td> <td>Morris Peterson </td>
</tr> <tr>
<td>David Lee </td> <td> Kurt Thomas </td> <td>Luke Walton </td> <td> Mike James </td>
</tr>
<tr>
<th colspan=4 bgcolor=lightyellow> Figure:4 Table Example with a Caption </th>
</tr>
</table>
Figure 4: Table Example with a Caption


When Figure 4: above is displayed by your browser, it looks like:

Team Members for 5-Person Basketball
Knicks Spurs Lakers Hornets
Jamal Crawford Tim Duncan Kobe Bryant Chris Paul
Eddy Curry Manu Ginobili Lamar Odom David West
Nate Robinson Tony Parker Derek Fisher Tyson Chandler
Quentin Richardson Bruce Bowen Pau Gasol Morris Peterson
David Lee Kurt Thomas Luke Walton Mike James
Figure 5: Table Example with a Caption displayed by your browser


You will note that I used the following table attributes in the table in Figure 5:

  1. <CAPTION> - the caption attribute defines the title for the table
  2. <th> - beginning of a table header
    • colspan - denotes how many columns this header will span
    • bgcolor=lightyellow> - the background color for this table header should be ligh yellow
  3. </th> - end of a table header

Table Size

When I use tables, I usually allow the tables to automatically expand to contain the data that is placed in them. However, as a designer, you have the ability to control the size of the table and the size of the columns in it. How can we control the size of the table and its columns? You can use the height and width attributes of the <table> and/or <td> tags. For an example of how this is done see Figure6 below.



<table border=4 Width=300 Height=300>
<tr>
<TD Width=30%>30% cell</TD>
<TD Width=70%>70% cell</TD>
</tr>
</table>
Figure 6: Table Example with a Caption


When the tags in Figure 6 are displayed by your browser, it looks like the following:


30% cell 70% cell
Figure 7: Table using Width and Height
You will note that I used a nested table (table within a table) for Figure 7. In the next section, we will display some table attributes.

Table Attributes

Figure 4: below shows the Attributes that can be used with the Table tag.

Tag Description
      Table     
ALIGN = LEFT or RIGHT
alignment of text within a cell
BACKGROUND: picture to use as background
BGCOLOR: background color of a cell or row
BORDER: size of border around the table
BORDERCOLOR: color of border around the table
BORDERCOLORLIGHT: color of "light" part of border around the table
BORDERCOLORDARK: color of "dark" part of border around the table
CELLPADDING: space between the edge of a cell and the contents
CELLSPACING: space between cells
FRAME = VOID or BOX or BORDER or ABOVE or BELOW or LHS or RHS or HSIDES or VSIDES
parts of outside border that are visible
HEIGHT: height of the table as a whole
HSPACE: horizontal space between table and surrounding text
RULES = NONE or ALL or COLS or ROWS or GROUPS
if there should be internal borders
SUMMARY: Summary of the purpose of the table
VSPACE: vertical space between table and surrounding text
WIDTH: width of the table as a whole
Figure 9: Table tag and table attributes


In the next section we will explore using the table attribute border.

Table border

Source code Displayed in your browser
 
<table border>
<tr>
<td> A </td>
<td> B </td>
</tr>
</table>
 
A B
 
<table border=1>
<tr>
<td> A </td>
<td> B </td>
</tr>
</table>
 
A B
 
<table border=2>
<tr>
<td> A </td>
<td> B </td>
</tr>
</table>
 
A B
 
<table border=3>
<tr>
<td> A </td>
<td> B </td>
</tr>
</table>
 
A B
 
<table border=4>
<tr>
<td> A </td>
<td> B </td>
</tr>
</table>
 
A B
 
<table border=5>
<tr>
<td> A </td>
<td> B </td>
</tr>
</table>
 
A B
 
<table border=6>
<tr>
<td> A </td>
<td> B </td>
</tr>
</table>
 
A B
Figure 10: Table attribute - border


Optional Attributes

The following table shows the optional attributes that may be used.

Attribute Value Description
align left
center
right
Deprecated. Use styles instead.
Specifies the alignment of a table according to surrounding text
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Deprecated. Use styles instead.
Specifies the background color for a table
border pixels Specifies the width of the borders around a table
cellpadding pixels Specifies the space between the cell wall and the cell content
cellspacing pixels Specifies the space between cells
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Specifies which parts of the outside borders that should be visible
rules none
groups
rows
cols
all
Specifies which parts of the inside borders that should be visible
summary text Specifies a summary of the content of a table
width pixels
%
Specifies the width of a table

Feel free to copy and paste the code in the above Figures into a source file.






HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2013 All Rights Reserved Total Application Works