For this assignment you'll:
You'll make a web page that looks something like this:
Table Test
My Classes:
Class Period Teacher French 1 Ms. Sanchez Math 2 Ms. Pi History 3 Mr. Egypt PE 4 Ms. Sweat Click here to go back to my page of lists
Tables contain rows and columns. The table in the example above has four rows and three columns. Each small square is a cell. The table above has twelve cells.
HTML tables use three tags:
- A <table> tag marks the entire table
- A <tr> tag marks each row. "tr stands for "table row"
- A <td> tag marks each cell. "td" stands for "table data"
For example, the table:
northwest northeast southwest southeast Is written in HTML as:
<table border="1">
<tr>
<td>northwest</td>
<td>northeast</td>
</tr>
<tr>
<td>southwest</td>
<td>southeast</td>
</tr>
</table>Look closely at the tags. There is one pair of <table> </table> tags for the entire table. Between them there is one pair of <tr> </tr> tags for each of the two rows. Between them there is one pair of <td> </td> tags for each of the two cells in the row.
1) Start Notepad
Click on the Windows Start button, then Programs, then Accessories, then Notepad.
2) Copy and paste this HTML document into your new Notepad file
<html>
<head>
<title>Table Test </title>
</head>
<body>
<h1>Table Test</h1>
<p> My Classes:</p>
<table border="1">
<tr><td>Class</td> <td>Period</td><td>Teacher</td></tr>
<tr><td>French</td><td>1</td><td>Ms. Sanchez</td> </tr>
<tr><td>Math</td><td>2</td><td>Ms. Pi</td></tr>
</table>
</body>
</html>This document contains:
3) Save your file
a) Click on the File menu and choose Save As.
b) Go to the folder from the previous assignment (it should look like David's HTML but with your name instead).
c) Name the file table.html
You must include the "." between "table" and "html", with no space before or after the "."
4) Edit the table
a) In the second row of the table change "French" to your first period class name and "Ms. Sanchez" to your first period's teacher name.
b) Change the third row of the table to your second period class name and teacher.
c) Add a fourth row to the table that shows your third period class name and teacher.
d) You can stop there or you may continue adding the rest of your classes.
5) Change the headings to boldface
The boldface tag is <b>. Make the headings in the first row boldface:
a) Change:
Class
to:
<b>Class</b>
b) Do the same to "Period" and "Teacher"
6) Preview your file
a) Select File and then Save to save your file
b) Open your file in Internet Explorer and see how it looks. It should look something like the table in the example at the top of this assignment.
7) Add a link to the previous assignment
Just after the </table> tag add a line like this:
<p><a href="David's Web Page.html">Click here</a> to go back to my page of lists</p>
But change "David's Web Page.html" to the name of your previous assignment.
8) Center the heading
Change the <h1> tag (found near the top of the file) to <h1 align="center">.
9) Change the color of one cell
Change one of the <td> tags to <td bgcolor="red">
This will make that cell red. You may stop there or if you want you can change the color of several cells. Have fun! Be artistic!
10) Change the page color and the text color
Refer to the "More Raw HTML" assignment and edit the <body> tag by adding a bgcolor and a text attribute.
11) Preview your file
a) Select File and then Save to save your file
b) Click on your page in Internet Explorer and press the Refresh button
c) Click on the link to make sure it goes to the previous assignment's page
12) Turn in your assignment
Copy the page you made for this assignment over the outbox, into the folder you made for the previous assignment (it should look like David's HTML but with your name).