Computing Concepts

Advanced HTML: Tables and Forms

2

Contents

Tables Forms

3

Why use Tables?

For tabular data Price list

For layout Used extensively for layout, not

covered today

The Basic Table

5

Basic tables

Rows and cells Borders Headings Alignment Captions Percentage widths There is more to cover – not this

year

Tables

Tables are defined with the <table> tag A table is divided into rows (with the

<tr> tag), and each row is divided into data cells (with the <td> tag)

The letters td stands for "table data," which is the content of a data cell

A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

7

Tables

<table border="1"> <tr>

<td>row 1, cell 1</td> <td>row 1, cell 2</td>

</tr> <tr>

<td>row 2, cell 1</td> <td>row 2, cell 2</td>

</tr> </table>

8

Example

9

Table borders If you do not specify a border attribute the table

will be displayed without any borders Sometimes useful, but most of the time, you want

the borders to show, at least during design.

Table with a one pixel border<table border="1">

Table with a fat border<table border="10">

Table with no border<table border=“0">

10

Table Headings

Headings in a table are defined with the <th> tag.

<table border="1"> <tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr> <td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

</table>

Centred and bold

11

Alignment Within Tables

<table > <tr> <th align="left">My Grades</th> <th align="right">January</th> <th align="right">February</th> </tr> <tr> <td align="left">Computing Concepts</td> <td align="right">A</td> <td align="right">A</td> </tr></table>

How many rows?How many columns?

12

Table Captions

<table><caption> Years </caption><tr> <td> Level C </td> <td> Level I </td> <td> Level H </td></tr></table>

13

Empty Cells

Borders around empty table cells are missing To avoid this, add a non-breaking space (&nbsp;) to

empty data cells, to make the borders visible: 

<table border="1"> <tr>

<td>A</td> <td>B</td> </tr> <tr>

<td>C</td> <td>&nbsp;</td> </tr>

</table> Empty cell filled with a non breaking space

Empty cell filled with a non breaking space

14

Percentage widths

<table width=“70%” >

<tr>

<td width=“50%”>A</td><td>B</td>

</tr>

<tr>

<td>C</td><td>D</td>

</tr>

</table>

What will this look like in a browser?

What will this look like in a browser?

15

Table Review 1

<table></table> Creates a table<tr></tr> Creates a row<td></td> Creates a cell<th></th> Creates a header, centred and bold<caption> </caption> Creates a caption

16

Table Review 2

Attributes width

align

border

There are more but not just yet

17

Draw this

<table width=“90%” border=“2”> <tr> <th width=“50%”>My Grades</th> <th>January</th> <th>February</th> </tr> <tr> <td align="left">Computing Concepts</td> <td align="right">A</td> <td align="right">&nbsp;</td></tr></table>

18

Answer

19

Add Another Row

<table width=“90%” border=“2”> <tr> <th width=“50%”>My Grades</th> <th>January</th> <th>February</th> </tr> <tr> <td align="left">Computing Concepts</td> <td align="right">A</td> <td align="right">&nbsp;</td></tr></table>

Write the code to add another row to this table

20

Another Row

<table width=“90%” border=“2”> <tr> <th width=“50%”>My Grades</th> <th>January</th> <th>February</th> </tr> <tr> <td align="left">Computing Concepts</td> <td align="right">A</td> <td align="right">&nbsp;</td></tr><tr> <td align="left">PDP</td> <td align="right">Pass</td> <td align="right">Missed my tutor, Failed</td></tr></table>

Tip: Copy and Paste a row and change the content

Forms

Forms

A method of interaction between the user and a web site

HTML tags are used to build the interface and controls

CGI or Javascript technologies are used to process the form information

Forms

A form is an area that can contain form elements

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form

A form is defined with the <form> tag

<form>

input elements

</form>

Form Structure

A form is made up of four separate elements:

Labels Boxes for entering text Option blocks

check boxes radio buttons menus

Buttons

Form Elements

Text fields Text fields are used when you want the user

to type letters, numbers, etc. in a form Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices

Check Boxes Checkboxes are used when you want the

user to select one or more options of a limited number of choices.

Processing the Form

A form is a means of collecting information The information needs to be processed A form uses the Action attribute to point to a

script or program that will process the information

The Method attribute works in conjunction with the Action attribute to specify how information is sent to the server

Action Attribute & the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to the server.

The form's action attribute defines the name of the file to send the content to.

The file defined in the action attribute usually does something with the received input.

Form Example

<form name="input“ action="html_form_submit.asp" method="get">

First name:<input type="text" name="firstname" /><br />Last name:<input type="text"name="lastname" />

</form>

29

What next?

Cascading Style SheetsHTML assignment, at least

4 linked pages A list 2 images Table Colour and formatting Links Comments

To get a higher mark you have to research beyond the course handouts and can demonstrate a wider knowledge of the use of HTML and demonstrate its effective use in our web pages

30

Further Reading

Tutorial – highly recommended http://www.w3schools.com/html/

Reference http://www.w3.org/MarkUp/

Beginners book Mac Bride, Teach Yourself HTML

Publishing on the World Wide Web (Teach Yourself) January 2003;Hodder Arnold Teach Yourself; ISBN: 0340859555,

31

Questions?