TABLES
Tables provide layout structure to an HTML document by using columns and rows – very similar to a spreadsheet (think EXCEL). Tables are rectangular in shape as are columns and rows. NO EXCEPTIONS.
A basic table with ONE ROW and ONE COLUMN would look like this:
<table border=”1″>
<tr>
<td>Cell 1 Row 1</td>
</tr>
</table>
<table><!– starts a table –>
<tr> <!– starts a row –>
<td><!– starts a cell –>
Cell 1 Row 1<!– content of the cell –>
</td><!– ends the cell –>
</tr><!– ends the row –>
</table><!– ends the table –>
Basically you “open” the table, start a row, have one or more cells per row, close the row, and then close the table. If you want more rows, add more row tags, and if you want more cells in a row add more “td”-table data, tags. NOTE the number of columns must stay consistent between all rows within a table. Meaning if your first row has 4 columns/cells, all other rows account for 4 columns.
TABLE FORMATTING
<table border=”#”> = Table Border
<table cellspacing=”#”> Cell Spacing or the space between the cells
<table cellpadding=”#”> Cell Padding or the space between the content of a cell to the edge of the cell
<table width=”500″> Table Width (in pixels) – absolute value
<table width=”90%”> Width Percent (percentage of the area the table is located up to 100%) – relative value
<table align= ” “> Value can be left, right, center and aligns the table
<tr align= ” “> Value can be left, right, center and aligns the contents of the cells in the row
<td align= ” “> Value can be left, right, center and aligns the contents of the cell
<tr valign=” “> Value can be top, middle, bottom and VERTICALLY aligns the contents of the cells in the row
<td valign=” “> Value can be top, middle, bottom and VERTICALLY aligns the contents of the cell
<td nowrap> No Line breaks
<td colspan=”#”> Defines the number of Columns to span
<td rowspan=”#”> Defines the number of Rows to span
<td width=”#”>Width in pixels – absolute
<td width=”%”>Width using Percentage – relative
<table bgcolor=”…”> Background color (CSS preferred)
<td bgcolor=”…”> Cell color (CSS preferred)
EXERCISES
- Update your resume using tables to control your layout
- Use CSS to style your content
- If not already on your resume, add an email link as well as links to former employers, online work, references, etc.
- Repeat the in class exercise on your own
- Look at www.torontoimageworks.com and tryt o duplicate the layout using tables
RESOURCES
w3schools.com