While using Web editors, you will encounter problems with tables. Sometimes you can fix these using the GUI (graphic user interface) sometimes you must work with the code or else trash the entire table and start over. If you are holding a sliced image together with a table, working with the code is usually the quickest method of repairing a table. In any case, to be an effective (and more marketable) Web developer you must have a good working knowledge of HTML. This exercise will help you understand the code behind tables so you can identify and fix problems that might occur during production.
<html>
<head><title>HTML Code for a Table</title></head>
<body bgcolor="#ffffff">
<table width =100% border="1">
<tr>
<td width=75%> here is my first cell in the first row</td>
<td width=15%> here is my second cell in the first
row</td>
<td rowspan=3 bgcolor=red width=10%>here is a cell that spans three rows</td>
</tr>
<tr>
<td width=75%> here is my first cell in the second row</td>
<td width=15%> here is my second cell in the second
row</td>
</tr>
<tr>
<td colspan=2 bgcolor=blue align=center> here is a cell in the third row that spans two
columns</td>
</tr>
</table>
</body>
</html>
Here is the table the above code creates.
Most students will want to create this table with HTML (B)
Those who want a challenge, create this table with HTML (A)
Those who want more of a challenge, try this table with HTML (A+)
REMEMBER:
- a cell that spans rows belongs to the table row at the top of that cell.
- a cell that spans columns belongs in its own row.
- You do not have to match the cell sizes, just their locations within the table unless working on the "more advanced" table exercise.
STEPS:
-Open browser and Simple Text document
-Create HTML page and save
-Preview as you continue to work
-Show me when you are done.