Application Title

Welcome User Name | Sign Out

• Page One
• Page Two
• Page Three

Sidebar

• Item One
• Item Two
• Item Three

1. Item One
2. Item Two
3. Item Three

Section/Page Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam est erat, aliquet at, tincidunt id, vehicula ut, lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam pharetra, enim sit amet mattis feugiat, nulla ligula cursus lectus, et placerat nunc pede et orci. Praesent sed magna eget odio cursus commodo. Etiam ipsum augue, pulvinar sed, accumsan sit amet, aliquet auctor, tellus. In faucibus nibh sed libero dapibus congue. Sed euismod odio ut libero. Praesent sagittis cursus elit. Morbi est dui, semper id, laoreet sit amet, elementum in, purus. Maecenas nec mi tincidunt sapien eleifend mollis. Nullam vel lorem. Cras augue. Aliquam eros felis, varius eu, gravida ac, imperdiet at, magna. Pellentesque eleifend justo pulvinar neque. Praesent condimentum. Duis lobortis lorem at tortor. Aenean eget arcu ut lorem consequat accumsan.

Default Form

Important: Required fields are marked with an * asterisk.

Contact Us

Name * City * Email * * This field is required, please enter a value. Telephone Please provide area code Message * * This field is required, please enter a value. Operating System * This field is required, please enter a value. Mac OS X Windows XP Windows Vista Linux Select Company Volvo Saab Mercedes Audi Acura Ferrari

Desired Format

JPEG PNG GIF

Other Input Types

Upload file Enter Your Password *

Preferred Delivery Method

Email Snail-mail Catapult

Form with "login" Class Added.

Notes:

• This class can only be used on a login page. All other forms should use the default styles.
• For this layout to work properly, a <br /> needs to be added after each label-input pair.

Important: Required fields are marked with an * asterisk.

Login

Username *
Password *

Tables

The main table tag should include a "summary" and "cellspacing=0".

Note: Not all tables will have a footer or Row headers (headers on the left). But all tables will need to have at least Column headers (headers on the top of table). Also, note that in the code tfoot (footer) should appear before tbody. View W3C specification for reason .

Table with Column Headers and Footer

Column Header	Column Header	Column Header	Column Header	Column Header	Column Header
Foot Row Header	Foot Data Cell	Foot Data Cell	Foot Data Cell	Foot Data Cell	Foot Data Cell
Row Header	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell
Row Header	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell
Row Header	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell

Table Example with Zebra Styling

Column Header	Column Header	Column Header	Column Header	Column Header	Column Header
Foot Row Header	Foot Data Cell	Foot Data Cell	Foot Data Cell	Foot Data Cell	Foot Data Cell
Row Header	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell
Row Header	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell
Row Header	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell

Grid Views

For sortable data, add the classes "sort-up" for ascending data and "sort-down" for descending. The class is applied to the a tag within the th that will be sorted. In other words, add a link to the table-heading text and apply one of the classes mentioned above.

Note: When adding sorting classes, a descriptive title should given to the link. The title is describing the action taken when the link is clicked, not the current state. That means, that when the class "sort-up" is applied, the sorted column will show an arrow pointing up (ascending order) but the title for the link will describe what happens next. In this example it would be title="Sort column in descending order." The example code below includes the titles for your convenience.

Sortable Grid View Example

Artist	Song Title	Album	Year	Actions
Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell	Edit
Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell	View
Body Data Cell	Body Data Cell	Body Data Cell	Body Data Cell	Delete