Displaying Tabular data

HTML Tables

• A grid of rows and columns. is called a table
• Some information is best presented in a table
• HTML provides a table element that lets you create tables in an HTML document.
• As with lists, the table element implies a structure.
• it is not just a matter of producing a particular appearance
• it is intended to specify the structure of the information.

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

• The basic table is a container element, with beginning and ending tags.
• The table contains rows, created with <tr> </tr> tags.
• The rows contain cells, created with <td> </td> tags.
  • td stands for Table Data
• The cells contain the actual content, such as text or graphics.
• In a basic table every row must contain the same number of cells.

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

• block elements have a property called padding
• it can also be specified in more detail as padding-left, padding-right, padding top, and padding bottom
• it is similar to margin in that it creates space around the text in the block
• padding adds space inside the border, while margin adds space outside the border
• you can use padding with any block element, but it is especially useful with table cells

Styling tables

• The table element can have a style rule
  • for example, table {border: solid medium red;}
• The td (table cell) element can have a style rule.
  • for example, td{padding: 10px}

Example 8.1b - tables and styles

• These style rules are added to the original table example 8.0.
• There is a a thin red border around the entire table.
• Each individual cell has a thin blue border.
• Ther is padding between the cells and the outer border of the table
• There is padding inside the cells around the centered test.
• The table background color is "behind" the cells.

        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>

• cells in a table often contain a row or column heading
• the heading indicates what kind if information is in that row or column
• Use <th> instead of <td> to mark cells as table headings

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

• The th heading cells can be styled differently from other cells
• Browsers usually make them bold by default
• In this example, the table heading text is italic, not bold.
• The text is centered in the heading <th> cells and left justified in the data <td> cells
• The heading and data cells have different colored backgrounds.

        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.

• The outer container is <table>.
• The child grouping components include
  • caption <caption>
  • header <thead>
  • footer <tfoot>
  • body <tbody>
• The thead, tfoot, and tbody are subdivided into rows <tr> (table row)
• The rows are subdivided into heading or data cells <th> or <td>

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;
            }

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

• The td and th elements have a style property vertical-align.
• td and th are the only elements in all of HTML that have this property
• The possible values are top, bottom, and center.
• some cells may contain more lines of text than others.
• The whole row adjusts to accommodate the largest cell.
• The browser has a default setting for vertical-align
• The default setting is commonly center.
• The effect of vertical-align only shows up when the content in some cells is higher than others.

Example 8.2c and 8.2d- vertical alignment

• Example 8.2c is almost identical to 8.2b
• the td has vertical-align: top
• The complete example 8.2c
• Example 8.2d is almost identical to 8.2b
• the td has vertical-align: bottom
• The complete example 8.2d

Creating uneven cells.

• In a basic table, all rows must contain the same number of cells.
• A cell can be spread across more than one column
• You give it a a colspan attribute
• In this case there should be fewer cells in the row.
• There is also an attribute rowspan. We will not look at it this term.

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

        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

• This example is a Phone Directory
• It is a table showing faculty information.
• It has four columns, for name, office phone, and courses.
• The cell in the first row spans all 4 colums to make a main title section.
• The cells in the second row are headings
• This example illustrates table headings and vertical alignment.
• It also shows that a table cell can contain almost any element.
• In this case some cells contain a list.

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

Using tables for layout

• Tables were originally intended for displaying tabular scientific data.
• Web designers also used table to control the layout of a document on the screen
• layout means the placement of images and text on the page
• at first there was no other way to do it.
• Cascading Style Sheets are now the preferred way to control the layout of the page.
• If you look at the source code for a lot of pages, you will still see tables in use.

Example 8.5 - creating text columns with a table

• The cells in a table adjust to fit the text inside them.
• Thisexample shows how the cells in a table can be regarded as sections on a page.
• The table has two rows and two columns.
• The first row spans across two columns, using the colspan attribute.
• It creates the "headline"
• The second row of the table is has two cells
• Each cell in the second row contains a lot of text
• In the first version, the cell boundaries are invisible'
  • The text is justified, creating the visual effect of text columns on the page
  • The complete example 8.5a Be sure to look at the source code.
• In the second version, the cells have borders added, so you can see how it's done
  • The complete example 8.5b Be sure to look at the source code.

The border-collapse property

• You may have noticed that there is always space between the cell borders
• This is the default browser setting
• You can change it with the style property border-collapse
• the property is for the entire table
• The possible values are collapse or separate
• To collapse the space between cells, use table {border-collapse: collapse} in the style rules for the table.
• To create the space , use table {border-collapse: separate}

Example 8.6 - border-collapse

• Example 8.6 is almost exactly the same as Example 8.1b.
• It has the style rule table {border-collapse: collapse}
  • That is the only difference
  • There is no space between the cells.
  • There is no space between the cells and the outside of the table - the table background color isn't visible.
• Note: The outer border may be red (the table border color) or blue (the cell border color) depending on the browser.

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

Guidelines

• Use the table structure to present data that is tabular in nature - that is, if it needs to be arranged in rows and columns.
• use the th element for the cells in the first row if they are table headings.
• use the colspan attribute to create cells that span across more than one column