Web Designing

Table and Forms

Course outline
• Understand how to use HTML tables for content.
• How to use tables for layout.
• Learn HTML best practices.
• Understand about HTML forms and create a simple contact me form.
• HTML Divs and how to separate content for CSS styling.
HTML Tables
• An HTML table is defined with a <table> tag.
• Table rows are defined with <tr> tags.
• Table headers are defined with <th> tags. (bold and centered by
default).
• Table cells (data) are defined with <td> tags.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Attributes of table tag
Attribute Description
Align It specifies the horizontal alignment of the table. Possible alignments are left,
right and center.
Valign It specifies the vertical alignment of the table. Possible alignments are top,
bottom and middle.
width It specifies the width of the table. It can be given as number of pixels or as
percentage relative to the screen.
Border It specifies the thickness of the border of the table.
Cellpadding It specifies the distance between data in the cell and cell boundaries.
Cellspacing It specifies the distance between adjacent cell of the table.
colspan It specifies the number of column for a cell. It is used inside <th> or <td> tag. A
cell may consist of many columns.
Example
• <table align=“left” bgcolor=“red” border=1 cellpadding =5
cellspacing=2 width=“90%”>
<TABLE style= width="80%" align="center" border=1 cellpadding =5 cellspacing=2>
<caption> CSC503 timetable </caption>
<tr bgcolor="pink">
<th width=150>Time Slot</th>
<th width=150>Monday</th>
<th width=150>Tuesday</th>
<th width=150>Wednesday</th>
<th width=150>Thursday</th>
<th width=150>Friday</th>
</tr> <tr>
<td>6-7pm</td>
<td> Look at website</td>
<td bgcolor="yellow"> free</td>
<td> Implementation</td>
<td bgcolor="yellow"> free</td>
<td bgcolor="yellow"> free</td>
</tr> <tr>
<td>7-8pm</td>
<td> Take some notes</td>
<td bgcolor="yellow"> free </td>
<td> Implementation </td>
<td bgcolor="yellow"> free </td>
<td bgcolor="yellow"> free </td>
</tr> </TABLE>
Activity -1
• Write a code to create the following table:
Activity -2

Write a code to create the following table:

Activity- 3

Write a code to create the following table:

Row spanning
• Now we insert a red cell spanning two rows. This is done with the
rowspan attribute. The following syntax is used when designing tables
that include rowspan.
• <td rowspan=x> where x is the number of rows to be spanned.
Row spanning code
<TABLE style= "width: 30%" align = "center">
<tr >
<td bgcolor = "red" rowspan = 2 width = 75> red cell</td>
<td bgcolor = "silver" height =100> silver cell</td>
</tr>
<tr >
<td bgcolor = "gold" height =100> gold cell</td>
</tr>
</TABLE>
colspan
• we insert a cell that spans the two columns, using the colspan
attribute:
• <td colspan=x> where x is the number of columns to be spanned.
Activity-4
• Add a hyperlink in table cell.
Forms in HTML
• Forms are use to create interactive websites. The visitors can send
feedback, emails, comments and suggestions by using these forms.
• The form is an easier way for the user to communicate.
Use of forms:
• Educational Sites
• To collect names, addresses, emails and other information by educational websites.
• Online orders
• To get online orders from the visitors.
• Feedback
• To get feedback from the users or visitors.
• Interface of chatting
• Many users use form for chatting others using the internet.
Form Elements
• A form consists on different from elements are as follow:
• Textbox
• List box
• Radio button
• Check box
• Button
• Text area
• Password field
 Form tag and attributes
• <form> tag is use to create a form in web page.
• All form elements are inserted within start tag <form> and end tag </from>.

Attribute Description
Name It specifies the name if the form
Method It specifies the how the form data is sent to the server. The
possible values are as follow
GET: it send the data as part of URL. The data include with
URL can be seen by other people. It also remembered by the
browser. It is the default value.
POST: it sends the data encoded in HTTP data stream. It is
mostly used to send a large amount of data. The data is
displayed in URL. There is more secure.
Action It specifies where the form data will be submitted. It is
normally sent to a script on the server or submitted as email.

• <form name =“abc” method =“post” action=mailto:xyz@gmail.com></form>

mailto: This parameter holds the email recipient address mail.
The <input> Element
Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many

choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Text Field
• Text field is use to get input from the user in the form of letters ,
numbers etc.
Attribute Description
Name It specifies the name of the text field
Value It refers to the contents of the text field

• Example:
• Name: <INPUT TYPE="text" NAME="name" VALUE= "---please type here---">
Password field
• Password fields are used to input passwords in the form. Each
character inserted in the field appears as *. The attributes are same
as text field.
• Example
• Enter Password: <input type ="password" name = "password">
Radio button
• Radio buttons are used when the user has to choose one option from
multiple choices.
Attribute Description
Name It specifies the name of the text field
Value It refers to the contents of the text field
Checked It specifies the radio button is selected by default

• Example:
<input type ="radio" name = "gender" value = "male" checked> Male
<input type ="radio" name = "gender" value = "female"> Female
Checkbox field
• Checkboxes are used to provide many options to the user. The user
can choose one or multiple options from available choices. The
attributes are same as radio button.
• Example:
<input type ="checkbox" name = "travel"> Traveling
<input type ="checkbox" name = "sports"> Sports
<input type ="checkbox" name = "chatting"> Chatting
Select field
• Select field is use to provide predefined list of items to user. The user
can select one or more options from the list.
• <select> tag is use to create the list.
• <option> tag is use to create an item in the list.
Example:
<select name = "city">
<option value= "Lahore" > Lahore
<option value= "Karachi" selected> Karachi
</select>
Text area field
• Text area field is use to text box but it may consist of multiple rows. It
is use to get lengthy input from the user.
• <textarea> tag is use to create text area in a form.
• Example:
<textarea>
Text here
</textarea>
Practical
• Write HTML code to design a feedback form to an author, the from
should accepts detailed data from the user. The data includes first
name, second name, gender, city and the books liked by the user.