Introduction to Tables

Tables on web pages are used for displaying the kind of information that you would typically find organized in rows or columns. Examples of tables include travel schedules, historical information, or pricing information. Tables are a very useful tool for presenting all kinds of information on a web page.

For example, a pricing table may include a description of the item for sale, its shipping weight, and the price of the item. A historic table could display historic data profiling the events of the American Revolution. In this case, the data could include dates of events, names of historical figures connected with the events, and a description of the events which took place.

Table Headers, Table Data and the Table Row

We describe tables in terms of rows and columns. A row is information displayed horizontally, while a column is information displayed vertically. Typically, tables structure information into categories.

Information in a table is contained in either a table header cell, or a table data cell. The HTML tags <th> and </th> are used for table header content, and the HTML tags <td> and </td> and used for table data content. Dreamweaver gives us the option of headers on the top, on the left side, or on both the top and left side. The use of headers is optional, you can create a table without headers.

By default, text in table header cells is center aligned, and displayed with a bold font. Text in the table data cells is left aligned, and displayed with a regular font.

Whether table header cells or table data cells are used, each row of cells must be contained inside HTML table row tags: <tr> and </tr>.

Let us consider a classic use of a table include, the Travel Schedule. A Travel Schedule table displays the arrival or departure of planes, buses or trains.

This is what the HTML code of the above Flight Schedule table looks like:

<table>

    <caption>Flight Schedule</caption>
    <thead>
        <tr>
            <th>Airline</th>
            <th>Flight</th>
            <th>Origin</th>
            <th>Status</th>
            <th>Scheduled Arrival</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>American</td>
            <td>4879</td>
            <td>Charlotte</td>
            <td>On Time</td>
            <td>12:22PM</td>
        </tr>
        <tr>
            <td>American</td>
            <td>4909</td>
            <td>Philadelphia</td>
            <td>On Time</td>
            <td>12:59PM</td>
        </tr>
    </tbody>
</table>

As you can see, the HTML structure of a table is very much like the general structure of a web page. Inside the table there is a table header, <thead>, a table body <tbody> and (not shown) a table footer <tfoot>.

Tables do not have to have headers, and table header cells are not required to be contained in the <thead></thead> tags. However using <thead></thead> is considered good practice. What about the table footer? The table footer element is actually very rarely used.

As you can see, a table can also have a caption. The table caption must immediately follow the opening HTML <table> tag. The table caption is contained in the HTML <caption> and </caption> tags. Similar to the table header cells, the text will be centered in the table caption. The table's caption appears above the table.

In the example above, the top row contains table header cells. Table header cells do not have to be in the top row. They are also frequently found as the first element in each row of a table. In this case, the table header cells would form a column on the left side of the table.

Sometimes tables will have headers on both the top, and the left side.

Tables with headers on the top and side are typically used to match two points of information together. The classic example of this kind of table is the multiplication table:

This is what the HTML code of the Multiplication Table table looks like:

<table border="1" cellpadding="5">
<caption>Multiplication Table</caption>
<tbody>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    </tr>
  <tr>
    <th>2</th>
    <td>4</td>
    <td> 6</td>
    <td> 8</td>
    </tr>
  <tr>
    <th>3</th>
    <td>6</td>
    <td>9</td>
    <td>12</td>
    </tr>
  <tr>
    <th>4</th>  
    <td>8</td>
    <td>12</td>
    <td>16</td>
    </tr>
  </tbody>
</table>

Notice that the top row has table header cells, and that each of the subsequent rows also start with a table header cell.

Finally, cells can be merged together using the "colspan" attribute and the "rowspan" attribute.

This is what the HTML code of the Colspan Rowspan Table table looks like:

  <table border="2">
  <tbody>
    <tr>
      <td colspan="2">These two cells are merged with colspan attribute</td>
      <td>/</td>
      <td>/</td>
    </tr>
    <tr>
      <td>/</td>
      <td>/</td>
      <td>/</td>
      <td>/</td>
     </tr>                     
    <tr>
      <td>/</td>
      <td>/</td>
      <td>/</td>
      <td rowspan="2">These two cells are merged with the rowspan attribute</td>
    </tr>
    <tr>
      <td>/</td>
      <td>/</td>
      <td>/</td>
     </tr>
  </tbody>
</table>

The table above basically consists of 4 rows, and 4 columns, like the Multiplication Table. However the first two cells are merged together with the colspan="2" attribute which makes one 'super-cell' that spans two columns. Because the first 'super-cell' spans two columns, there are only two more cells in the first row. When creating 'super-cells' that span multiple columns or rows, you cannot exceed the dimensions of the table, in this case 4 rows by 4 columns. By default, a table cell has a colspan of "1", and a rowspan of "1". So if we add up the row spans of the first row, we get: 2 + 1 + 1 = 4.

Notice that the fourth row also only has three cells. This is because of the "rowspan=2" attribute of the last cell in the third row. If we add up the rowspan of the last column, the values are 1 + 1 + 2. The "rowspan=2" attribute of the last cell in the third row effectively eliminates having a fourth cell in the bottom row, since the dimensions of a rows or cells must always add up to 4 in a table with 4 x 4 dimensions.

Creating a Table In Dreamweaver and Formatting Tables with HTML

When you consider how many elements are in a typical table, tables are actually very easy to create in Dreamweaver. You add a table using the Insert / Table menu option, or the keyboard shortcut Ctrl+Alt+T.

Dreamweaver Table Dialog Box

When you define a table with Dreamweaver, you must enter the number of rows and columns in order to create a table. The table dialog box lets you designate the number of rows and columns you want to insert without typing HTML code. You can optionally include a caption and summary. The table summary attribute is deprecated in HTML5. When a feature is deprecated, this means it is no longer officially supported, and will be removed from working code. You should not use code which is deprecated. More about Caption and Summary at w3.org.

You can also specify whether or not the table has either a header on the left (header column), header on the top (header row), a header on both the top and left, or no header at all (none).

While you have the option of specifying the table width, border thickness, cell padding and cell spacing when creating the table, you do not want to enter any numbers in these fields! Table border thickness should be defined in the CSS file, not the HTML structure.

In the examples of the above tables, we are using HTML to style the table, setting the table border width and cell padding. This is being done for demonstration purposes. Table styling should always be done with CSS, and not HTML. To format a table, use the CSS Designer panel to select properties and their values.

Formatting Tables with CSS

Here is an example of our Colspan Rowspan Table table, styled with CSS rather than HTML.

These two cells are merged with colspan attribute / /
/ / / /
/ / / These two cells are merged with the rowspan attribute
/ / /

 

Here is the CSS used to style the table:

               <style>{
                border:2px solid #B27400;
                background-color:#FFA600;
                padding:15px;
                text-align:center;
                font-weight:bold;
                }
             </style>

CSS allows you much greater control over the appearance of a table than HTML. Any display property of a table can be controlled using the wide variety of properties available with CSS.

Formatting Tables with Bootstrap 3

Bootstrap 3 has several classes to help format your tables. By adding the class of “table” to a basic table, Bootstrap will provide some light padding and horizontal dividers.

You have probably seen tables formatted using “Zebra striping”. This is the case where rows alternate in color. If you want to add “zebra striping” to your Bootstrap 3 tables, you do not need to write a lot of code, just add the class of “table-striped” to your table.

You can also add borders around your table by adding in the class of “table-bordered.”

We will also use another Bootstrap 3 table class, “table-hover.” This class will change the appearance of the table when the visitor hovers or places a cursor on the table row. And there are other Bootstrap 3 table classes as well.

These Bootstrap 3 classes are very effective for taking a basic table add adding some visual appeal with minimum work from the web designer.

Using Tables for Design Before CSS

Before the introduction of CSS, tables were also very popular as tools for web page layout. Tables could be used to control the display of elements on the web page when few other tools were available to do so. In modern web design, tables should never be used for layout, since CSS offers a better alternative.

If you work on an older website, you may still find some cases of tables used for general formatting.

Using Tables for Email Blasts

You may need to use tables for formatting email blasts. Email is not quite up to the same standards as web design, and there is not yet universal email support for CSS.

Links for more information:

About tables at W3 schools.

About table formatting with Bootstrap


Wayne Joness
West Los Angeles College, cs952
Fall 2016