Sunday, February 22, 2015

Lab 3a - Page Layout

Page Layout

1. Tags for tables:
<table></table> - open/close the table
<tr></tr> - identify rows
<td></td> - identify cells
<td colspan=“2”> - specify number of columns to be spanned
<td rowspan=“2> - specify the number of rows to be spanned
<caption> - assigns a title to the table

2. Colspan and rowspan are used to merge columns and rows in tables. The number in the quotes specifies how many rows/columns to be spanned. When using either of these, the number of total rows/columns must balance or there may be formatting problems when the table renders.

3.
<table border="4" bgcolor="#FFFF00" width=100%>
<tr>
<td colspan="2">Banner</td>
</tr>
<tr>
<td colspan="2">Navigation</td>
</tr>
<tr>
<td width=80%>Main Content</td>
<td width=20%>Sidebar</td>
</tr>
</table>
<br>
<table border="4" bgcolor="#FFFF00" width=100%>
<tr>
<td colspan="3">Banner</td>
</tr>
<tr>
<td width=20%>Navigation</td>
<td width=60%>Main Content</td>
<td width=20%>Sidebar</td>
</tr>
</table>

4. I can now appreciate what you have said in lecture a number of times: "Always close your tags when you open them!"  I had appreciated it as helpful advice, but actually practising it has made the point even more clear. It is so much faster to code the tables if you set up the structure with the tags first.

No comments:

Post a Comment