Introduction to Tables

Tables

Tables were originally developed to display rows and columns of data on the Web. It quickly became apparent however to layout-starving Web designers, though, that tables could be used as a way to control the arrangement of elements on a Web page. Even now, the most popular use of tables in Web design is as a layout tool, although CSS does a much better job for layout so that's primarily how we'll do layout in this class.

Tables are really meant to hold data, and that's what we're focusing on for them.

Attributes for <TABLE>

align

 left | right according to text. To center a table use a <div>

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  

text

text

Table aligned right

bgcolor

In a table, you can set the background color of an entire table the row or a cell. Use hexadecimal values.

blue

blue

Table blue background

border

Border value is defaulted at 1 pixel. To turn it off, set it must be set to 0.  The number represents a pixel value.

Border 

on 

Border 

off

cellpadding

 space within cells 

cell

cell

cellpadding is set at 15 pixels

cellspacing 

space between cells 

cell

cell

cellspacing is set at 15 pixels

width

can be specified by percentage of the screen or by pixels

test

test

50 pixels in width

summary

The summary of a table never shows up in visual browsers; it exists solely for screen readers and speech browsers. It is simply a summary of what the table contains, a longer description than the caption. Most software reads the summary immediately before reading the caption.

 

Tags within a Table

The basic tags found within a table are <td>.....</td> to define table cells, <th>.....</th> to define table headers, and <tr>....</tr> to define a table row. The various attributes of these tags allow even more control over the initial cells within the table.

Tag

Description

Common attributes 

<caption>...</caption>

Contents of this tag display immediately above the table itself. Usually contains a description of what's going to be in the table. Typically not used in layout, only for data tables.

 

<tr>....</tr>

Table row. All table cells and table headers need to be inside a table row.

align
bgcolor
valign
= vertical alignment

<th>.....</th>

Table header. Depending on the browser settings, text in a table header may be bold or larger than default. The table header is used for row headers or column headers, those labels in a data table that tell what's in the defined cells. See the example below.

align left|right|center  refers to the content of the cell
bgcolor
colspan
rowspan
width
valign
= vertical alignment

th scope="row" associates the text in this cell with every cell in this row

th scope="col" does the same thing for columns

<td>.....</td>

Table cell. Any content in your table must be in either a table cell or a table header.

align left|right|center  refers to the content of the cell
bgcolor
colspan
rowspan
width
valign
= vertical alignment

The following data-table tags are typically not used in layout tables, and are not yet well-supported by all browsers, but they'll be tremendously helpful in the future.

<thead> ... </thead>

 

Defines a group of header rows (generally the columun labels across the top) in a data table. A thead holds <tr> .. </tr> containers, each of which will have <th> ... </th> containers inside it. A table can only have one thead. THEAD lets supporting browsers include the header rows on each page of a printed, multi-page table, and present a long table with a scrolling body and static header rows.

 

<tfoot> ... </tfoot>

 

Defines a group of footer rows in a data table. A tfoot will have <tr> ... </tr> containers inside it, each of which will have <td> ... </td> containers in it. A table can only have one tfoot. Counter-intuitively, in the code the <tfoot> is supposed to preceed the <tbody>, even though it'll be displayed below the <tbody> on the rendered page. Supporting browsers will include the footer rows on each page of a printed, multi-page table, and will present a long table with a scrolling body and static footer rows.

 

<tbody> ... </tbody>

 

Defines a group of data rows in a table. Supporting browsers will scroll the tbody while leaving the thead and tfoot static.

 

There's a good example of the th scope="..." attribute used in a data table at http://cita.rehab.uiuc.edu/courses/2003-01-LIS350AR/lec11/slide15.html

There's lots of additional information and details about table tags, attributes, and values at http://www.htmlhelp.com/reference/html40/tables/

Example table

Mortality rates

 

Cats

Dogs

Cars

5%

12%

Curiousity

23%

2%

<table border="1" cellpadding="3" cellspacing="0">
<caption style="font-weight:bold; font-size:1.2em">
Mortality rates
</caption>
<thead><tr>
<th>&nbsp;</th>
<th scope="col">Cats</th>
<th scope="col">Dogs</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><div align="left">Cars</div></th>
<td><div align="right">5%</div></td>
<td><div align="right">12%</div></td>
</tr>
<tr>
<th scope="row"><div align="left">Curiousity</div></th>
<td><div align="right">23%</div></td>
<td><div align="right">2%</div></td>
</tr>
</tbody>
</table>

 

 

Basic Tables

A table at its most basic form will contain the tags <table><tr><td></td></tr></table>. Any content in a table must be contained within <td>...</td>. Any <td>...</td> must be contained within <tr>...</tr>. Any <tr>...</tr> must be contained within <table>...</table>. 

Below is a simple table : 

<table> 

<tr

<td></td>

<td></td>

</tr>

<tr

<td></td>

<td></td>

</tr>

</table>

 

 

Table Sizing

The width and height of a table are controlled using CSS. You can also set table width (but not height) by way of the width attribute in the table tag itself. Like many of the values we have learned, these can be set by using either pixels or a percentage %.  A table set at a percentage will change size only in relation to the window.  A table set at pixels will not change size at all.  As a default, tables will grow to fit the content placed in side of them. 

It is also possible to control the width and height of cells.  Use the width and height attributes the same way you would for a table.  The table below has the width and height of the table and the cells specified. 

10%

test

test

test

test

test

The table above is 40% of the screen and the cells are 10% and 90%. By controlling the sizing of a table we can make the layout of Web page extremely precise. 

<head>
<style type="text/css">
<!--
table.demo {
width: 40%;
height: 100px;
}
-->
</style>
</head>

<table border="2" class="demo">
<tbody>
<tr>
<td width="10%">10%</td>
<td width="90%">test</td>
</tr>

etc...

Colspan and rowspan

colspan will allows one to span multiple columns while rowspan allows one to span multiple rows.  Place the colspan or rowspan attribute in the first cell of that row or column. Remove any extra cells in subseqent rows/columns to give the span room to work.

A basic table HTML for a 2-row table with three columns:

<table border="1"> 
   <tr
          <td>row 1 column 1</td>
          <td>row 1 column 2</td> 
          <td>row 1 column 3</td> 
  </tr

  <tr
          <td>row 2 column 1</td>
          <td>row 2 column 2</td> 
          <td>row 2 column 3</td> 
 </tr

</table> 
 

row 1 column 1

row 1 column 2

row 1 column 3

row 2 column 3

row 2 column 2

row 2 column 3

For example, if you have a 2 column 2 row table with four cells, and you want the first cell to span 2 columns, remove the second cell in that row.

Notice below how one must balance the rows and columns spanned.

this code works:

<table> 

<tr
<td colspan="2">test</td> 
</tr

<tr
<td>test</td> 
<td>test</td> 
</tr

</table> 
 

results -->

test

test

test

this code won't do what you want it to:

<table border=1>
<tr>
<td colspan=2>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</table>

 

results -->

test

test

test

test

test

 

 

The differences between rows and columns

Remember, under normal circumnstances, columns always go up and down.

If columns go side-to-side, something has gone terribly wrong.

When columns are spanned, something goes across them--like a roof.

vertical columns

horizontal columns

spanning columns


Rows, on the other hand, should always go side-to-side.

If you have horizontal rows, something bad has happened.

When something spans rows, it's probably sitting partly in your seat. I often sit next to rowspanners in airplanes.

rows

 

 

 

 

Keeping track

The HTML for tables is hard to figure out just by looking at it. Creative comments and indentations can help. (Note that this deviates from the standard indentation style, in which all the td tags line up in the same place.)

<table border="1"> 
         <!-- column 1 lines up here-->
               <!-- column 2 lines up here--> 
                    <!--column 3 lines up here--> 

  <!--this is the first row across -->
  <tr
          <td>row 1 column 1</td>
               <td>row 1 column 2</td> 
                    <td>row 1 column 3</td> 
  </tr

  <!--this is the second row across -->

  <tr
          <td>row 1 column 1</td>
               <td>row 1 column 2</td> 
                    <td>row 1 column 3</td> 
 </tr

</table> 
 

row 1 column 1

row 1 column 2

row 1 column 3

row 2 column 1

row 2 column 2

row 2 column 3

 

 

<table border="1"> 

          <!-- column 1 lines up here-->
                    <!-- column 2 lines up here--> 
  <tr
          <td colspan="2">test</td> 
  </tr

  <tr
          <td>test</td> 
                    <td>test</td> 
  </tr

</table> 
 

test

test

test

 

 

<table border="1">

         <!-- column 1 lines up here-->
                    <!-- column 2 lines up here--> 
  <tr>
         <td rowspan="2">test</td>
                    <td>test</td>
  </tr>
  <tr>
                    <td>test</td>
  </tr>
</table>

test

test

test

To review examples of extensive use of comment tags as an aid to writing tables, revisit these sample HTML pages:

Table Height is not always your friend

Again, there is no valid HEIGHT attribute within the table tag. It would be nice if we could rely on it to work, but we can't. Until CSS, the workarounds were not pretty: either use a bunch of <br /><br /><br /><br /> tags, or put in what's called a "spacer" image: a transparent gif that's actually 1 px x 1 px, but use the img height and width tags to stretch it to the height you want to force the cell to be.

The easy way: CSS

I want <table class="200"> to be 200px high. Easy enough...

<head>
<style type="text/css">
<!--
table.200 {
height: 200px;
}
-->
</style>
</head>

The old way: transparent gif

Until CSS, the most reliable way to force a table to be a certain height was to stick an invisible image of the right height into the table.

If you need to do this, there's a transparent spacer at blank.gif. Save this (remember, you won't be able to see it, it's invisible) and then use a tag like:

<img src="blank.gif" width="1" height="100" align="right">

within a <td>...</td>. The image will force the table cell to be 100 px high. It's not elegant, but it works.

Each instance of a spacer image might cause another hit on the server, so you wouldn't want to put 700 spacers on a page; even if the user can't see them they'll wonder why it takes an hour for the page to load. Check mealsmatter.org for an example; if you view the source or properties you'll find they have about 50-100 invisible images on every page. (!)

 

Tables and Color

Earlier in this class, we learned that color can effect a person's mood or emotion. It can change a person's perceptions and it can invoke memory. When we combine color with a table, we come up with an effective way to direct the attention of our audience. 

When using color within a table, there are three options: 

Color the entire table
<head>
<style type="text/css">
<!--
table {
background-color: #9999CC;
}
-->
</style>
</head>

1

2

3

4

Color a whole row
<head>
<style type="text/css">
<!--
tr.withcolor {
background-color: #9999CC;
}
-->
</style>
</head>

1

2

3

4

Color a single cell
<head>
<style type="text/css">
<!--
td.withcolor {
background-color: #9999CC;
}
-->
</style>
</head>

1

2

3

4


 
 

Practical use of color in a table

 

Header Title

Section one

Content,Content Content, Content, Content

Out of control 

A

B

C

D

E

F

G

H

U

J

K

L

M

N

O

N

P

1

2

5

6

8

Y

H

C

B

M

D

G

U

 

Background images

Using a background image allows you to experiment with a limited form of layering.  When used correctly, background images in a table can add an air of sophistication to a Web page or jazz up an other wise dull page. There are many ready-made background images that still allow text to be easily read despite the background image.

The example below is a simple table with a background image. 

Welcome to Plant World

Dahlias

$3

Tulips

$2

Rootabagas

$1

Parsnips

free

Brussels sprouts

we pay you

To add an image to the background of a table <table class="funky">, use the code below.

<head>
<style type="text/css">
<!--
.funky {
background-image: url(background2.gif);
color: #FFFFFF;
}
-->
</style>
</head>

You can also add background images to individual cells, by assigning the class to the td.

<table>
<tr>
<td>No background here</td>
<td class="funky">Background here</td>
</tr>
</table>

Backgrounds will tile unless you tell them not to, meaning the same image is displayed multiple times--usually with an ugly seam. Setting the size of the table with pixels or actually resizing the image can sometimes help eliminate this effect. Or, to stop it from repeating, just add background-repeat: no-repeat to the style:

.newbackground {
background-image: url(background2.gif);
background-repeat: no-repeat; }


By the way, if you want a background image to be fixed when the page scrolls, you can do it like this:

body {
background-image: url(background2.gif);
background-attachment: fixed; }

Tables for Layout

One of the most popular-but-now-obsolete uses of tables has been as a page layout tool, even though that's not what they're supposed to be used for. In this class, we use CSS for page layout and tables for data presentation, since anything you can lay out with tables you can do better with CSS.

Historically (before CSS), tables have been used for page layout in many different ways. The following are some popular examples on the Web of page layout with that have been done with tables, though if they were being redone they'd likely use CSS.

Nested Tables

Nested tables can give you a lot of flexibility when it comes to data presentation.  However, because you are doing a table within a table, they can also be very complicated.  It is important to make sure that every cell, row and table is properly closed.  Using spaces and indents between your HTML code can help you to keep things straight and avoid errors. The example below is a Web page that uses nested tables.

Arrivals

Departures

Missing baggage

Bonus miles

Missing baggage
 
 

Flight 1

Flight 2

Flight 3

Flight 4

Flight 5

Flight 6

 

To reclaim your lost luggage, bring your passport, a major credit card, and five gallons of your own blood, to any of our convenient distribution centers in Wyoming.

 

Below, borders have been added to the table so that you can see exactly where the tables begins and ends.
 

Arrivals

Departures

Missing baggage

Bonus miles

Missing baggage
 
 

Flight 1

Flight 2

Flight 3

Flight 4

Flight 5

Flight 6

 

To reclaim your lost luggage, bring your passport, a major credit card, and five gallons of your own blood, to any of our convenient distribution centers in Wyoming.

 

 

The HTML for this nested table is below.  All of the table tags are in red, and the nested table has been indented.

<html>
<head>
<title>Nested Table Example</title>
<body bgcolor ="#FFFFFF">

<table>
<tr>
<td bgcolor="#CC3399" width="20%">
<a href="in.html">Arrivals</a><br />
<a href="out.html">Departures</a><br />
<b>Missing baggage</b><br />
<a href="bonus.html">Bonus miles</a><br />
</td>

<td width="80%">
<h2>Missing baggage </h2>
 

<table>
<tr>
<td>Flight 1</td>
<td>Flight 2</td>
</tr>

<tr>
<td>Flight 3</td>
<td>Flight 4</td>
</tr>

<tr>
<td>Flight 5</td>
<td>Flight 6</td>
</tr>
</table>
 

<p>
To reclaim your lost luggage, bring your passport, a major credit card, and five gallons of your own blood, to any of our convenient distribution centers in Wyoming.
</p>

</td>
</tr>
</table>

 

 

 

 

 

Using CSS to format a complex data table

Data tables often present complex information. Good use of color and borders can make these considerably easier to read. Investing some time in setting up custom CSS for the elements in a table will result in more digestible data presentation.

College Airlines Flight Schedule

Flight Number:

From:

To:

Departure:

Arrival:

Total: 3 flights

BA 98107

Ballard

Fremont

19:20

19:21

SSCC 98126

SSCC

White Center

19:40

19:40 1/2

AND 331

Bothell

Andromeda

2006

4032

The code for the table itself is fairly straightforward. The colors are drawn from the CSS. Here's the code that created this table:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A complex data table</title>
<style type="text/css">
<!--
 /* datatable style */
.datatable {
 border-collapse:collapse;
 font-family:arial, helvetica, sans-serif;
 font-size:100%;
}
 
 .datatable caption { 
font-size:120%;
 font-weight:bold;
 color:#000000;
 padding: 3px;
 text-align:left;
}
 
.datatable thead th {
 background-color:#666699;
 color:#FFFFFF;
 text-align:left;
 padding: 3px;
 border-bottom: solid 1px #99CC99;
 vertical-align: top;
 font-weight:bold;
}
 
.datatable tbody th {
 background-color:#99CCCC;
 text-align:left;
 color:#000000;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-right-color: #99CC99;
 border-bottom-color: #99CC99;
 padding: 3px;
 vertical-align: top;
 font-weight:bold;
}
.datatable tfoot td {
 font-weight:bold;
 background:#666699;
 color:#FFFFFF;
 padding: 3px;
 vertical-align: top;
 
}
.datatable tbody td {
 background:#FFF;
 padding: 3px;
 vertical-align: top;
 border: 1px solid #DCDCC1;
}
 
.datatable tbody tr.odd td {
 background-color:#CCCC99;
}
 
/* end data table */
-->
</style>
</head>
<body>
<table class="datatable" summary="This table lists all the 
flights by College Air leaving campus today.">
 <caption>
 College Airlines Flight Schedule
 </caption>
 <thead>
 <tr>
 <th scope="col">Flight Number:</th>
 <th scope="col">From:</th>
 <th scope="col">To:</th>
 <th scope="col">Departure:</th>
 <th scope="col">Arrival:</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <td colspan="5">Total: 3 flights</td>
 </tr>
 </tfoot>
 <tbody>
 <tr>
 <th scope="row">BA 98107 </th>
 <td>Ballard</td>
 <td>Fremont</td>
 <td>19:20</td>
 <td>19:21</td>
 </tr>
 <tr class="odd">
 <th scope="row">SSCC 98126 </th>
 <td>SSCC</td>
 <td>White Center </td>
 <td>19:40</td>
 <td>19:40&nbsp;<sup style="font-size:10px">1</sup>/
<sub style="font-size:10px">2</sub></td>
 </tr>
 <tr>
 <th scope="row">AND 331&oslash;&oslash;</th>
 <td>Seattle</td>
 <td>Andromeda</td>
 <td>2006</td>
 <td>4032</td>
 </tr>
 </tbody>
</table>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

Table practice exercises

Tables are confusing by nature, and the best way to get a good handle on them is to do a lot of them. Try these exercises just for practice. You don't need to turn them in for a grade, but doing them now will help prepare you for work that will be graded. If you run into any troubles, start a thread in the classroom discussion area and we'll all work together to problem-solve.

table exercise

Terms and concepts to know

Page Layout
Template
<TABLE>
< TD>
< TR>
< TH>
Table Attributes

Nested Table
BGCOLOR VALIGN
CELLPADDING
CELLSPACING
colspan
rowspan

Readings

About.com: Tables FAQ
http://html.about.com/compute/html/library/weekly/aa072000a.htm

Web Monkey Lean and Mean Tables Tutorial 

More information


Tables 

Table tags, attributes, and values, http://www.htmlhelp.com/reference/html40/tables/

Web Monkey Authoring Tables

About.com HTML: Tables 

Netscape Table Sampler