Tables & Frames - Part 1

Both tables and frames provide the ability to organize not only information on your Web pages, they can also be used to layout your entire Web page. Today we’ll look at a few of the basic HTML tags necessary to create tables.

To begin a table, we use the <table> tag. This tells the browser that we are starting a table. When the table is finished, we close the tag like so, </table>. To insert rows, the <tr> tag is used and when the entire row is finished we close the row tag </tr>. To create individual cells in a table the <td> tag opens the cell and the </td> signifies the end of a cell’s content. In addition, there is a table header <th> tag that is used for column and row labels. This tag generally bolds and center aligns the text(center aligns if the content is not text) in a cell. Of course, to signify the end of a table header cell, the </th> tag is use

Let’s use the example of a two column, two row table. Here is the code:

<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

Note: The numbers have been inserted to help identify the table cells.

Sometimes it is necessary to merge cells together to attain the proper layout. When this is done we use the rowspan and colspan attributes. If a column is being removed we use colspan and if a row is being removed, we use rowspan. These attributes are inserted into the opening <td> tag. When this occurs, the number of columns or rows being removed must be accounted for and the correct number of <td> tags must be omitted (either from the same row in a colspan or from different rows in the case of a rowspan). Below is an example of a table that is two columns by three rows, however, in the first column we will only have one row (notice the removal of two <td> tags. One from the second row and another from the third row):

<table>
<tr><td rowspan=”2″>1</td><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>

Image here…

The W3school’s table tutorial.

Today’s Objectives:

• Identify the different kinds of text boxes
• Explain the uses of radio buttons and checkboxes
• Place text boxes, radio buttons, and checkboxes in a Web page.

Classwork: Assignment 9-1 & vocab.

Prep Questions: