Tables

In this lesson, we worked with tables, and placing data within the cells of the table.

Tables: The <table>, <tr>, and <td> tags:

All tables begin with the <table> tag, and then use the <tr> and <td> tags to make the rows and columns. Here's a table with three rows and three columns:

row 1, column 1 row 1, column 2 row 1, column 3
row 2, column 1 row 2, column 2 row 2, column 3
row 3, column 1 row 3, column 2 row 3, column 3

Here's the code for that table:

And, like other tags, each of these three tags has attributes than can be used. However, with HTML5, many have been eliminated. These are the ones that are left (to replace the ones that have been removed, it is suggested that you use CSS):

An example of the colspan="" attribute, using the previous 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
row 3: columns 1, 2, and 3

To accomplish this, two of the final three <td> tags were removed and the last was modified, within the final set of <tr> tags:


Of course, not only text can be placed into the cells that make up a table; anything that can be placed on a page can.

row 1, column 2
row 2, column 1 row 2, column 2 Even links to other places!

Here's the code for the above table:


Click here for more information on <table> attributes.
Click here for more information on <tr> attributes.
Click here for more information on <td> attributes.

NAUTILUS:
Much like the Images & Lists assignment, this was a refresher for me. I've been working with tables for years (probably over using, really). During this assignment, however, I did learn of about the many attributes that have been eliminated from the three tags.