Lesson 20: Introduction to HTML tables

 Signed in as:    
      Sign out



Your home page

Creating Websites home

   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends


In this lesson, we see how to define tables in HTML, and we provide four examples of HTML and CSS code. Topics include:


Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.


Lesson 20: Introduction to HTML Tables

Click here for the video transcript


Hands on exercise

This exercise is primarily focused on adding style to support a table as well as extending an existing table to have an additional column. We also request a header row to create a header for each column.

In your MyWebFiles directory is a file named 'tables.html'. This contains much of the content we used in our sample table about meeting spaces, except it has twice as many rows and doesn't have any style element.

First, add a <style> element in your <head> element, containing the 'pic' class as in the lecture:

      .pic {width: 150px; height: 120px;}

and then add 'class=pic' into the start tag of all the second <td> elements in each row.


Next, add a new column of "standard seating configuration" for each space as follows:

Space name Configuration
Conference Room A Single round table
Conference Room Be Single oval table
Conference Room See Single oval table
Daffy-teria Mulitple small tables
Office Pool Standing room only
Executive Meeting Room   Single oval table
Play Room Standing room only
Garden Office Single square table
Garbage Bay Standing room only
Computer Room Single oval table
Music Room Chairs in rows, no tables
Exercise Room Standing room only
Subterranean Garage Standing room only
Mail Room Single square table
Waiting Room Back to back benches
Baiting Room Standing room only
Deluxe Broom Closet Standing room only


Finally, add a header for each column by adding a row of <th> elements.


Supplemental materials

    A cumulative summary of the contents of the course so far: Click here for the cumulative technical summary



 Lesson navigation 



Email us if you would like additional information. We would love to see your comments and recommendations for our site.