Table Styles

Simple Table Stylings

id="rowhighlights" and class="tdheader"

Header Row	Header Row
Cell 1	Cell 2
Cell 3	Cell 4

<table id=rowhighlights>
<tbody>
<tr>
<td class=tdheader>Header Row</td>
<td class=tdheader>Header Row</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>

class="altrow-odd" (no header)

Cell 1	Cell 2
Cell 3	Cell 4
Cell 5	Cell 6

<table id=rowhighlights class="altrow-odd">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>

class="altrow-odd" (w/ header)

Header Row	Header Row
Cell 1	Cell 2
Cell 3	Cell 4
Cell 5	Cell 6

<table id=rowhighlights class="altrow-odd">
<tbody>
<tr>
<td class=tdheader>Header Row</td>
<td class=tdheader>Header Row</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>

class="altrow-even" (w/ header)

Header Row	Header Row
Cell 1	Cell 2
Cell 3	Cell 4
Cell 5	Cell 6

<table id=rowhighlights class="altrow-even">
<tbody>
<tr>
<td class=tdheader>Header Row</td>
<td class=tdheader>Header Row</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>

.gridtable (overrides id="rowhighlights")

header	header
Cell 1	Cell 2
Cell 3	Cell 4
Cell 5	Cell 6

<table class="gridtable" id="rowhighlights">
<tbody>
<tr>
<td class=tdheader>header</td>
<td class=tdheader>header</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>

.gridtable2

header	header
Cell 1	Cell 2
Cell 3	Cell 4
Cell 5	Cell 6

<table class="gridtable2">
<tbody>
<tr>
<td class=tdheader>header</td>
<td class=tdheader>header</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>

"Stack" or "Responsive Table

The stack class style table needs the following syntax below to functin propperly. The most important distinctions are marked by bold-red. This stack style responsive table works well with the tabble class altrow-odd, due to the fact that the stack class overrides the first odd cell with a dark header, thenfollows up with a healthy light collored touple. Following this styleBox is a table with sample data.

Also, this mobile first table design works best on tables with 4 or less columns. Most common issues in implementing the stack table are with individual cells having an alternative syntax that sets the cell to a specific width. Clear unneeded syntax from whats listed below, and most issues ought to be resolved.

<table border="0" cellpadding="0" cellspacing="0" class="gridtable2 altrow-odd stack" id="rowhighlights" width="100%">
<thead> 
<tr> 
<td>Name</td> 
<td>Title</td> 
<td>Email</td> 
<td>Phone</td> 
</tr>
</thead> 
<tbody>
<tr> 
<td>Androlia, Kim</td> 
<td>Assistant to Registrar</td> 
<td><a href="mailto:kandroli@geneva.edu">kandroli@geneva.edu</a></td> 
<td><a href="tel:724-847-6603">724-847-6603</a></td>
</tr> 
</tbody> 
</table>

Name	Title	Email	Phone
Androlia, Kim	Assistant to Registrar	kandroli@geneva.edu	724-847-6603
Brown, Johnetta	Staff Spec. II - Registrar	jsbrown@geneva.edu	724-847-6745
Carter, Jennifer	Registrar	jlcarter@geneva.edu	724-847-6745
Gallo, John	Dean of Graduate, Adult, and Online Programs	jdgallo@geneva.edu	724-847-6796
Lasure, Vickie	Staff Spec. II - Registrar	vllasure@geneva.edu	724-847-6601
Schlachter, Cathy	Assistant to VP	cjackson@geneva.edu	724-847-6605
Stephens, Melinda	Dean of Undergraduate Programs	mstephen@geneva.edu	724-847-5235