1. “Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).
The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.”
- www.w3schools.com
Notice that the tags are nested. The <table> tags enclose both other sets of tags:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How it looks in a browser:
| row 1,cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
2. It is very important to understand that one builds a table with rows and cells.
3. Study the examples in the Tables section of the w3schools tutorials.
Practice working with tables. As you develop your skill with tables, your skill to layout well designed web pages will also grow. Pay particular attention to working with the examples listed on the web site.
4. After you have worked with the w3Schools web tutorial browse to these sites and go through these table tutorials: annabella's html help and pagetutor.com
5. ASSIGNMENT 4 Due Date: Friday, 9/19/08: Create tables with the following:
- Table with no border
- Table with a border
- Headings in a table
- Empty cells
- Table with a caption
- Table cells that span more than one row/column
- Tags inside a table
- Cell padding
- Cell spacing
- Add a background color or a background image to a table
- Add a background color or a background image to a table cell
- Align the content in a table cell
- Cell sizing: width and height
6. You may find you have to make more than one table to meet all of the criteria in the assignment.
It will actually be easier to work that way. That’s fine. Be sure to clearly indicate what the table is demonstrating. In other words, simply write a statement in the table indicating what criteria it covers.
7. ASSIGNMENT 5 Due Date: Tuesday, 9/23/08: Create a table that is going to be the layout design for a web page.
This table should fill the web page, and it should automatically change size when the page changes size. Here is an example of a table that could be used as a template for a web page.