IT581: Practicum in Web Development, Summer 2015 (Hybrid)

Displaying Tabular data

HTML Tables

    
    
    
    


<table>, <tr>, and <td>

Example 8.1a - a basic table

The following example shows a basic table with three rows

  <table>
    <!-- row 1 -->
  <tr>
    <td>
       First row <br/>first column
    </td>
    <td>
       First row<br/>second column
    </td>
  </tr>

    <!-- row 2 -->
  <tr>
    <td>
       Second row<br/>first column
    </td>
    <td>
       Second row<br/>second column
    </td>
  </tr>

    <!-- row 3 -->
  <tr>
    <td>
       Third row<br/>first column
    </td>
    <td>
       Third row<br/>second column
    </td>
  </tr>
  
  </table>

The complete example 8.1a



Style rules - the padding property

Styling tables

Example 8.1b - tables and styles

        table {border: solid thin red;
               padding: 15px;
               background-color: yellow}
        td   {padding: 10px; 
              border: solid thin blue;
              text-align: center;
              background-color: #cccccc}

The complete example 8.1b



Table headings - <th>

Example 8.2a - a table with headings

  <table>

    <!-- row 1 is column headings-->
  <tr>
    <th>
       First
    </th>
    <th>
       Second
    </th>
  </tr>
    <!-- row 2 -->
  <tr>
    <td>
       content<br />
       content<br />
       content<br />
    </td>
    <td>
       more content
    </td>
  </tr>
    <!-- row 3 -->
  <tr>
    <td>
       content here
    </td>
    <td>
       lots of content<br />
       lots of content<br />
       lots of content<br />
       lots of content<br />
       lots of content<br />
    </td>
  </tr>

  </table>
  

Complete example page using <th>. (No style rules)

Example 8.2b - Styling table headings

        table {border: solid thin red;}
        th   {padding: 10px; 
              color: maroon;
              background-color: silver;
              font-weight: normal;
              font-style: italic;
              text-align: center;}
        td   {padding: 10px; 
              background-color: #dddddd;
              text-align: left;}
		
Complete example page using <th> and style rules.


A more complete table example

The more complete and complex table code consists of nested container tags.

Basic structure of a table definition.

    <table summary="This example demonstrates the components of a table.
                  This summary attribute is for use by non-visual browsers.">
        <caption>
            Table Caption [Optional]
        </caption>
      <thead>
          <tr>
            <th>
                  Table head cell column 1.  
                  The head will be displayed as the first row.
            </th>
            <th>
                  Table  head  cell column 2. 
            </th>
          </tr>
      </thead>
      <tfoot>
          <tr>
            <th>
                  Table  foot cell column 1 
                  The foot will be displayed as the last row.
            </th>
            <th>
                  Table  foot cell column 2 
            </th>
          </tr>
      </tfoot>
      <tbody>
         <tr>
           <td>
                 First body row 
           </td>
           <td>
                 Table body cell 
           </td>
         </tr>
         <tr>
           <td>
                 Second body row
           </td>
           <td>
                 Table body cell
           </td>
         <tr>
         <tr>
           <td>
                 Third body row
           </td>
           <td>
                 Table body cell
           </td>
         <tr>
      </tbody>
    </table>
The style rules used are:

        table {
            border: solid thin red;
            }
        th, td {
            padding: .5em;
            border: none;
            }
        caption {
            caption-side: bottom;
            background: #fee;
            } 
        thead {
            background: yellow;
            }
        tfoot {
            background: #ddd;
            }
Table head cell column 1 Table head cell column 2
Table foot cell column 1 Table foot cell column 2
First body row Table body cell
Second body row Table body cell
Third body row Table body cell
Table Caption [Optional]

Link to the example.

This example illustrates the caption, thead, tfoot, and tbody elements. The text styling is the browser's default.

Notice that the caption and footer are at the bottom, even though that is not the order in which they appear in the source code.

The caplion placement is controlled by the caption-side CSS rule. The footer is always at the bottom.

.

Vertical alignment

Example 8.2c and 8.2d- vertical alignment



Creating uneven cells.

Example 8.3 - colspan

In this example, the first row is

    <!-- row 1 -->
  <tr>
    <td colspan="2">
       First row first cell.<br/>Spans two columns.
    </td>
    <td>
       First row second cell.<br/>fits over third column.
    </td>
  </tr>

The second and third rows are the same as example 8.1.

The complete example 8.3



Another example of uneven rows and columns

colspan="2"
one row
two columns
one row
one column
rowspan="2"
two rows
one column
colspan="2"
one row
two columns
one row
one column
one row
one column
one row
one column
rowspan="2"
colspan="2"
two rows
two columns
one row
one column
The syle rules are
        th, td {
            padding: .5em;
            border: solid thin black;
            background: #eee;
        }
        td[colspan="2"] {           /* Attribute selector */
            background: yellow;
            }
        td[rowspan="2"] {           /* Attribute selector */
            background: cyan;
            }

Link to the example of rowspan and colspan.


Example 8.4 Using tables

The complete example 8.4 Be sure to look at the source code.


Using tables for layout

Example 8.5 - creating text columns with a table


The border-collapse property

Example 8.6 - border-collapse

The complete example 8.6 Be sure to look at the source code.

Guidelines

Comments to: dong@hood.edu
Last Modified: 18 July 2015. 12:01