Study Guide: Web Design - Tables

<<Previous

Next>>

Tables are a more recent addition to HTML (1995) and since their introduction, many uses for tables have evolved. They give the web designer much more control over where elements are placed on a page. Coding tables by hand can quickly become confusing and cumbersome, so we'll just do a few simple examples here. As you get more involved in web authoring, you'll no doubt find an easier way to make tables. Some options for other web authoring tools can be found in the resources section.

Tables have rows of table data. The number of table data elements in a table row determines the number of columns. Tables can have borders or not. If there are no borders, the table itself is invisible in the browser, but the data in each cell will be aligned with the data in other cells. Table cells can have background colors, and their height and width can be specified or they can be merged together. In general, tables can be very complicated. Here is the simplified basic structure:

Tag name	Tag	Attribute	Values

Table	TABLE	border="..."	width of border, in pixels
		width="..."	width of table, in pixels or percent
		cell spacing="..."	spacing between cells, in pixels
		cellpadding="..."	spacing in cells, in pixels
Table row	TR	align="..."	left, center, right, justify
		bgcolor="..."	background color
Table data	TD	align="..."	left, center, right, justify
		bgcolor="..."	background color

<tr>

<td>Granny Smith</td>

<td>crisp, tart and sour</td>

</tr>

<tr>

<td>Ginger Gold </td>

<td>crisp, sweet, tangy and juicy</</td>

</tr>

<tr>

<td>firm, crisp, sweet and juicy </td>

</tr>

</table>

<tr>

<td bgcolor="red"><b>wagon</b></td>

<td bgcolor="#00CC00"><b>grass of home</b></td>

</tr>

<tr>

<td bgcolor="red"><b>rubber ball</b></td>

<td bgcolor="#00CC00"><b>pleasure machine</b></td>

<td bgcolor="skyblue"><b>jeans</b></td>

</tr>

<tr>

<td bgcolor="#00CC00"><b>eyed monster</b></td>

<td bgcolor="skyblue"><b>christmas without you</b></td>

</tr>

</table>

Exercise: Incorporate a simple table into your page. Be very careful with the table row and table data tags.