COMP1710 : Laboratory 4, version 1.1
1. Objectives Tables and Forms
In this lab, you will create two HTML tables, with some associated style, and
then two forms with two different actions to manage their content.
This lab uses some material from 2005 comp1710 textbook, more precisely, the
chapter 3 of the book "Design for New Media / Interaction Design for Multimedia
and the Web", by Lon Barfield / Pearson - Addison Welsey, as you will use
some of its content too fill the table. Because it is not this year textbook
anymore, you will be able to read the part I am referring
Make sure you have read all the online lecture notes, and especially, the
one about HTML tables and forms.
As usual now, create a directory named LABn_Uxxxxxxx where you will put
today's work. Include an index.html file that will link to the 3 html pages you
will create. There should be a link to that page in all the pages you will create.
There should be your name and a mailto link to your email at the bottom of all
your pages. Eventually, there should be a linked CSS file, the same for all
2.1 Task1 : Create a table
Create an HTML page that will contain your 2 tables. The first one's structure
should looks like this :
Make sure you enter data related to the subject of the table (GAS).
The first row and the first column should be filled with header cells. GAS is
about the type of task you may want to go trough before starting a web site.
You may find some reference to that method on the web, or present another acronymin
a similar way.
2.2 Task2 : Style the table
Have a look at the description
of CSS for Tables, by the W3c
Design/Dressing of the previous table.
You will propose a CSS that will change and improve the look and feel of the table.
The minimum requirements are the following.
- The Caption should be set at the bottom of the table, in italic
- The borders of the cells should be visible
- The Header cells should have a different background colour from the other
- The table should be horizontally centre on the page (do not use the old,
deprecated <CENTER> html tag).
There should be 10% margin on both side.
- Note that the first two columns are not very large : they leave room for the
- Make your table look different from other students ones.
2.3 Task3 : Create a form
Have a look at "Basic
Forms" by Ross Shannon
Create a page with a form that should ask for some feedback about a product
of your choice.
The minimum form fields to be filled by the user of the form will be
- First Name and Name (2 text fields)
- A mark between 1 and 5 of what they think of the quality of the product
(one possible mark selected at a time, of course). The mark three should be
selected by default. (they have to tick their choice).
- A selection of different quality of the product. The user should have the
ability to indicate none, one or more comments on the products quality from
a list of 5 options.
- A selection of places where the user has been able to get information from
the product (multiple selection possible). It should looks like something
like this :
- A text area (4 to 6 lines) where the user will be able to enter some general
feedback about the product.
- A hidden field that will code the IDnumber of the product
The table should of course come with the usual Submit and Erase all buttons.
You will test your form, first, with a mailto action. Make sure that everything
is working when you test it.
You will then submit your work with the action of the form being a POST submission
to the following CGI script :
Since you now know how to use CSS, so make that form attractive.
<form action="mailto:firstname.lastname@example.org" method="post"
works well to send by mail. In that case, you need the enctype attribute to
make sure that all the fields will be put into the same text, otherwise, only
the first field appears in your mail.
is enough to send to any CGI script.
will work too, but there is no need to specify the enctype for a script type
2.4 Task 4 : Create a table of your choice
Find some interesting content that would benefit from being displayed within
Put it in a table of your choice (it should be more than 7 cells table).
Apply some original CSS to that table.
After this 4th lab, you should have enough of plain HTML, and be ready to start
working with other types of media, starting from next week.
4. Extra work
Up to you, discuss with your tutor!
5. Summary to get 3 marks for this lab session
- Create a directory which name is LABn_Uxxxxxxx where n is the number of
the Lab and xxxxxxx is your student id.
- Within that directory, put the deliverables describe for this lab (see above)
- Zip that directory and its contents. ( If everything is working well, the
name of the zip file should be LABn_Uxxxxxxx.zip where xxxxxxx is your ...
- Send an email to both Pascal.Vuylsteker@anu.edu.au and to your tutor such
- The "Subject" of the email start with "COMP1710_LABn_Uxxxxxxx"
(without the double quotes, all uppercase, with underscores, and where
- The content of the mail is
- Some polite greetings, like "G'Day Mate, here is my first lab
submission. I'm sure She'll be Right !" or anything more classical. (Is this still you first lab submission? :-)
- The previously created zip file
- Make sure that your 'From' address is either the official ANU address (email@example.com
or FirstName.Surname@anu.edu.au) or start with FirstName.Surname@
- Send an email to yourself first if you want to check that everything is
Always CC the email to yourself and check that you are able to properly unzip
the attached file.
- Marking scheme
- If you manage to send properly (Subject, greeting, zip file attached
...) an email and if the zip contain something related to the present
lab, you get one mark.
- If you do most of the work and send it properly, you get 2 marks.
- If you do EVERYTHING properly and send it properly, you'll get up to
3 marks for this lab.
- To be valid, the submission should be send the very latest on Sunday
at 23:55 after the end the Laboratory in which you are enrolled. But you
should never wait till the last minute !