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_Mult.HTML">
    Table Tags: Multiplication </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. How do you create a Multiplication Table? we will explore this concept in the next section.

Multiplication Table

In the following table, we show the Table tag to illustrate a multiplication table.

To use the table below and follow these steps to find the answer to an multiplication problem.

  1. Pick a number from the top row (in bold), for this example choose 4.
  2. Pick another number, from the left column (also in bold), choose 4.
  3. From 4, move right until you find the box that lines up with the 4 in the top row. That box has 16 in it, this is the answer since 4 * 4 = 16.



110
  0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
1 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
2 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36 38 40
3 0 3 6 9 12 15 18 21 24 27 30 33 36 39 42 45 48 51 54 57 60
4 0 4 8 12 16 20 24 28 32 36 40 44 48 52 56 60 64 68 72 76 80
5 0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100
6 0 6 12 18 24 30 36 42 48 54 60 66 72 78 84 90 96 102 108 114 120
7 0 7 14 21 28 35 42 49 56 63 70 77 84 91 98 105 112 119 126 133 140
8 0 8 16 24 32 40 48 56 64 72 80 88 96 104 112 120 128 136 144 152 160
9 0 9 18 27 36 45 54 63 72 81 90 99 108 117 126 135 144 153 162 171 180
10 0 10 20 30 40 50 60 70 80 90 100 120 130 140 150 160 170 180 190 200
  0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
11 0 11 22 33 44 55 66 77 88 99 110 121 132 143 154 165 176 187 198 209 220
12 0 12 24 36 48 60 72 84 96 108 120 132 144 156 168 180 192 204 216 228 240
13 0 13 26 39 52 65 78 91 104 117 130 143 156 169 182 195 208 221 234 247 260
14 0 14 28 42 56 70 84 98 112 126 140 154 168 182 196 210 224 238 252 266 280
15 0 15 30 45 60 75 90 105 120 135 150 165 180 195 210 225 240 255 270 285 300
16 0 16 32 48 64 80 96 112 128 144 160 176 192 208 224 240 256 272 288 304 320
17 0 17 34 51 68 85 102 119 136 153 170 187 204 221 238 255 272 289 306 323 340
18 0 18 36 54 72 90 108 126 144 162 180 198 216 234 252 270 288 306 324 342 360
19 0 19 38 57 76 95 114 133 152 171 190 209 228 247 266 285 304 323 342 361 380
20 0 20 40 60 80 100 120 140 160 180 200 220 240 260 280 300 320 340 360 380 400
Enter two integers and then press the X button.
=
Figure 8: Multiplication Table


A Table tag is a powerful tool for displaying/organizing data in rows and columns. 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


Feel free to copy and paste the code and the above Figures into a source file. You may find this an excellent teaching aid for elementary school students.






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


To contact us

© 2002 - 2013 All Rights Reserved Total Application Works