CS 371, Fall 2001, Lab 3

CS 371, Fall 2001
Lab 3: Tables in HTML

An HTML table displays items in neat rows and columns. They are often used to neatly lay out the elements in a form or different parts of a page. Fundamentally, tables are a simple idea. A table is created using the <table>...</table> element. Inside this element are the rows of the table. Each row is created using the <tr>...</tr> element (where "tr" stands for "table row"). Inside a <tr> element are the individual items that go in the cells of the table. Each item is created with a <td>...</td> element (where "td" stands for "table data"). You can put anything at all inside a <td> element: simple text, paragraphs, lists, images, even another table. So, the outline of the HTML code to create a table looks like this:

      <table>

         <tr>
            <td> ... </td>
            <td> ... </td>
               .
               .
         </tr>

         <tr>
            <td> ... </td>
            <td> ... </td>
               .
               .
         </tr>
         
           .
           .
           .

      </table>

Here, for example, is a very simple table and the HTML source code that creates it:

<table>
   <tr>
      <td>(Row 1, Column 1)</td>
      <td>(Row 1, Column 2)</td>
      <td>(Row 1, Column 3)</td>
   </tr>
   <tr>
      <td>(Row 2, Column 1)</td>
      <td>(Row 2, Column 2)</td>
      <td>(Row 2, Column 3)</td>
   </tr>
</table>

(Row 1, Column 1)	(Row 1, Column 2)	(Row 1, Column 3)
(Row 2, Column 1)	(Row 2, Column 2)	(Row 2, Column 3)

However, there are a lot of optional attributes that you can apply to the <table>, <tr>, and <td> tags. This lab looks at some of the more useful options.

You might want to look at some of my pages that use tables. Here are three:

http://math.hws.edu/faculty/eck.html --- Uses tables for layout. This example uses one table nested as a table data item inside another table. Use your browser's "View Source" command to see the HTML source.
http://math.hws.edu/eck/cs371/lab3/colors.php --- A table of the 218 "web-safe" colors, which are supposed to work even on a 256-color monitor. I generated this table using PHP. For the php source code, click here. You can see the HTML code using your browser's "View Source" command.
http://math.hws.edu/dept/schedule_f01.html --- Uses two tables nested inside another table to display the Math/CS department's schedule of courses. Note the use of different background colors.

Options for the <table> Tag

There are several useful attributes that can be used in the table tag. You can see some of the more common attributes demonstrated on my TableDemo page. Attributes include:

align --- Add align="center" to the <table> tag to center the table on the page. Use align="left" to place the table on the left side of the page, with text flowing around it on the right. Use align="right" to place the table at the right, with text flowing around it.
width --- Specifies the width of the table. The value can be an integer that gives the width of the table in pixels. (For example, width="500".) It can also be given as a percentage of the page width. (For example, width="75%" for a table that fills 75% of the width of the page.) If you don't specify a width, the browser will calculate one based on the contents of the table.
bgcolor --- The background color of the cells of the table. This can be overridden by color specifications in the <tr> and <td> tags. The color can be given as a color name, such as "red", or as a hexadecimal color specification, like those in the Web-safe color table.
border --- Specifies the width of a border around the table, in pixels. Use border="0" for no border
cellpadding --- Specifies extra space, in pixels, around the content of each data cell and the edge of the cell. This space has the same color as the background color of the table.
cellspacing --- Specifies space, in pixels, between cells. In this space, the color from "behind" the table shows through. If you want absolutely nothing between the cells, you should set both cellspacing and border to 0.

Options for the <tr> Tag

Options specified in a <tr> tag affect all the cells in the row. The most useful attributes are align, valign, and bgcolor, which simply set the default values for these attributes for all the <td> tags in the row. See the next section for their meaning.

Options for the <td> Tag

The options in a <td> tag affect just one cell in the table, except for width and height, which can have implied effects on other cells in the same column or row.

bgcolor --- Sets the background color for this cell. The value can be a color name or a hexadecimal color specification.
align --- Specify the horizontal position of the text within the cell. Possible values are: "left", "center", "right", and "justify". A value of "center", for example, puts the contents of the the cell in the center of the cell horizontally. The default value is "left".
valign --- Specify the vertical position of the text within the cell. Possible values are: "top", "middle", and "bottom". A value of "top", for example, puts the contents of the the cell at the top of the cell. The default value is "middle". (Some browsers use "center" instead of "middle", but since this is the default value anyway, you don't have to specify it at all.)
colspan --- Use this attribute to make a cell extend across more than one column in the table. The value of the attribute is an integer that gives the number of columns. For example, colspan="2" makes the cell extend across two columns. Don't forget that the row in which this cell appears will than have fewer <td> tags than the other rows in the table. The table in the TableDemo uses colspan and rowspan.
rowspan --- Use this attribute to make a cell extend across more than one row in the table. The value of the attribute is an integer that gives the number of rows. For example, rows="2" makes the cell extend across two rows.
width --- Specify the width of the cell in pixels, such as width=100, or as a percentage of the width of the table, such as width="50%". You can expect problems if you give conflicting values in different cells. I suggest that if you want to set column widths, you should do all the widths in your first row of cells.
height --- Specify the height of the cell in pixels.

One final note on cells: It's generally not a good idea to have cells that don't contain any data at all. If you want an empty cell, put a non-breaking space in the <td>. This would look like <td> </td> in the HTML source code.

Assignment

Exercise 1: Make an improved version of your survey form (or a new form) that uses tables to lay out the elements of the form more neatly. Put a link to form on your main page for the course, and hand in a printout of the source code.

Exercise 2: In class, we looked at a function that could create an entire group of radio buttons. Write a similar function,

function makeSelect($varname, $options)

that will create a <select> menu. The first parameter gives the name of the menu, and of the associated PHP variable. The second parameter is an array that contains the various options for the menu in positions 0, 1, 2,.... Use your function either on a demo page or in the form that you create for Exercise 1. If it's on a separate page, turn in a printout of the source code and put a link to the page on your main page.

David Eck, September 14, 2001