o
Return to Yavapai College Home Page
Future Students Current YC Students Faculty & Staff Lifelong Learners Community & Visitors

Yavapai College > Information Technology Services > Web Services > Web Author Training Resources > 6. Tables

discover the magic of easy to create tables

Table Formatting Instructions for YC.edu

Tables are great for tabular data. Nothing else, nothing more.

Unfortunately, tables are often mis- and overly used resulting in pages that become very difficult and frustrating to maintain, and not to mention, they tend to look really ugly.

Sample Tables: Basic, Green & Olive

Layout Edit Copy Versions
Elements Stuff Shell Content Col2-Div
Resize Tools View Source Options
Elements Stuff Shell Content Col2-Div
Resize Tools View Source Options
Layout Edit Copy Versions
Elements Stuff Shell Content Col2-Div
Resize Tools View Source Options
Elements Stuff Shell Content Col2-Div
Resize Tools View Source Options
Layout Edit Copy Versions
Elements Stuff Shell Content Col2-Div
Resize Tools View Source Options
Elements Stuff Shell Content Col2-Div
Resize Tools View Source Options

Creating a Table is Simple and Easy

We can see a table below that contains five (5) columns x four (4) rows. We have a darker "header" row, then there are alternating lighter rows. This a very basic table that can be quickly modified to meet our needs.

It's crucial to understand that each row must have the same amount of TD tags as all the other rows -- otherwise the table will not form as we intend.

The number of columns per row is based on the number of sets of <TD> tags contained between each set of <TR> tags. Viewing the sample code below and you will see 4 sets of <TD> tags for each set of <TR>

Layout Edit Copy Versions
Elements Stuff Shell Content Col2-Div
Resize Tools View Source Options
Elements Stuff Shell Content Col2-Div
Resize Tools View Source Options
<!-- START (your comment) TABLE -->

<table class="basic">
<tr class="header">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

<!-- END (your comment) TABLE -->


To create tables that are green or olive,
simply edit the class reference from the
sample above like this:

<table class="green">
or
<table class="olive">


 
 


© 2009 Yavapai College, 1100 East Sheldon St., Prescott, AZ 86301
Contact Us:  928.445.7300 or 800.922.6787

Disability Resources    | Terms of Use    | Copyright Notice    | Cookie Usage    |    Questions or comments about this page? Let us know