HTML Tables

Objectives:

• Learn HTML tags for creating tables
• Tags discussed: <TABLE> <TD> <TR>

Template File(s):

• table.html

(Note: If you have not already done so, please downloaded the html template files.)

Tables

HTML enables you to create tables. If you are a confident word processor, this is nothing new. Features include:

• ability to create rows and columns
• ability to have a border or not
• ability to have items span rows and/or colums
Now, open the file table.html in your web browser. Note how it contains several tables.

Now view the HTML source of this file (View ... Source) and find the relevant tags.

Table 1. The first table is comprised of 2 columns and 5 rows, and has a border. In the second column and second row, the item is centered.

• To create a table, you use the <TABLE> tag. Similarly, to end the table you use the closing </TABLE> tag.
• Each row is designated with the <TR> tag. Note that, technically speaking, this tag should have a closing tag to end each row. However, I can be lazy and omit it.
• Each table data element is designated with the <TD> tag. Again, technically speaking, this tag should have a closing tag to end each row. However, I can be lazy and omit it.
• I can center an element by adding the ALIGN attribute, <TD ALIGN=CENTER>
Table 2. The second table is comprised of 2 columns and 2 rows, and has NO border. This approach provides a way to lay out icons across the screen. Note that I have now included closing </TR> and </TD> tags, to be technically correct.

Table 3. The third table is comprised of 4 columns and 4 rows, and has a border. This example illustrates how table elements can span rows and colums, by using the ROWSPAN and COLSPAN attributes in the <TD> tag. Specifically, the attribute is added and the value is the number of rows or columns that should be spanned. In this example, it is always 2.

Example Create a table in your ever-evolving home page: The table should have 2 rows and 2 colums The first row contains the words "Week 1" and "Week 2" The second row contains topics for those weeks. Save the file, then view it in your browser. You should now see the table.

[End of tutorial]