Table Functionality

Tables in pages can be style in many, many ways, but for the default download of Perfect Layout, I've applied only some basic styles. Here's a basic table of a few Star Fox characters:

Name	Team	Gender	Specie
Fox McCloud	Star Fox	Male	Fox
Falco Lombardi	Star Fox	Male	Falcon
Krystal	Star Fox	Female	Fox
Wolf O'Donnell	Star Wolf	Male	Wolf

The top row will be darkened an the text will be bolded through the use of the tableTop class applied to the tr tag. Below that, alternate rows (tr) have even and odd classes applied to them. The even rows (even class) have a light blue background to them, so one can easily tell the difference between each row. The table will also expand with the width of the page, however wide or narrow.

---

Relevant HTML

<table>
	<tr class="tableTop">
		<td>Title 1</td>
		<td>Title 2</td>
		<td>Title 3</td>
	</tr>
	<tr class="even">
		<td>Row 1, Column 1</td>
		<td>Row 1, Column 2</td>
		<td>Row 1, Column 3</td>
	</tr>
	<tr class="odd">
		<td>Row 2, Column 1</td>
		<td>Row 2, Column 2</td>
		<td>Row 2, Column 3</td>
	</tr>
	<tr class="odd">
		<td>Row 3, Column 1</td>
		<td>Row 3, Column 2</td>
		<td>Row 3, Column 3</td>
	</tr>
</table>

Relevant CSS

#content table
{
	margin-bottom:1em;
	border:1px solid #000;
	width:100%;
	background:#fff;
	text-align:left;
}

#content table .tableTop
{
	font-weight:bold;
	color:#fff;
	background:#000;
}

#content table td
{
	padding:0.3em;
}

#content table .even
{
	background:#edf3fe;
}

---

« Back to Functionality Index