Table Styles

Commonly, sets of data and information are laid out in a table format. In order to properly style this information, the table styles are used. These styles have been designed to style tables of all sorts.

Tables are generally laid out in a vertical fashion with headers at the top. In this case, please ensure that <thead> , <tbody> and <tfoot> tags are used. For example:

HTML Code Display


<table width="100%"> 
    <thead class="portlet-table-header"> 
        <tr> 
            <th>Column 1</th> 
            <th>Column 2</th> 
            <th>Column 3</th> 
        </tr> 
    </thead>
    <tfoot class="portlet-table-footer">
        <tr>
            <td>Footer Col 1</td>
            <td>Footer Col 2</td>
            <td>Footer Col 3</td> 
        </tr>
    </tfoot>
    <tbody class="portlet-table-body">
        <tr>
            <td>Col 1 Row 1</td>
            <td>Col 2 Row 1</td>
            <td>Col 3 Row 1</td>
        </tr>
        <tr class="portlet-table-alternate">
            <td>Col 1 Row 2</td>
            <td>Col 2 Row 2</td>
            <td>Col 3 Row 2</td>
        </tr>        
        <tr>
            <td>Col 1 Row 3</td>
            <td>Col 2 Row 3</td>
            <td>Col 3 Row 3</td>        
        </tr>
        <tr class="portlet-table-alternate">
            <td>Col 1 Row 4</td>
            <td>Col 2 Row 4</td>
            <td>Col 3 Row 4</td>        
        </tr>
    </tbody>
</table>

Column 1	Column 2	Column 3
Footer Col 1	Footer Col 2	Footer Col 3
Col 1 Row 1	Col 2 Row 1	Col 3 Row 1
Col 1 Row 2	Col 2 Row 2	Col 3 Row 2
Col 1 Row 3	Col 2 Row 3	Col 3 Row 3
Col 1 Row 4	Col 2 Row 4	Col 3 Row 4

This page details the section styles defined by AFSC and the Portlet specifications ( Java Portlet Specification and Web Services For Remote Portlets). The portlets below show the correct ways to implement these styles in your HTML, as well as serve as an example and test bed to see how the different styles render. Please see the different portlets below for when it is appropriate to use each individual style.