CS102

WEB DESIGN AND

PROGRAMMING
LESSON 4: HTML Table and Form
Intended Learning Outcomes
At the end of this lesson, you will be able to:
• Discussing the structure and use of HTML tables and
forms.
• Applying tags to create and format tables and forms.

LESSON 4: HTML Table and Form

HTML Tags
<table>
• The HTML tables allow web authors to arrange data like text,
images, links, other tables, etc. into rows and columns of cells.

• The HTML tables are created using the <table> tag in which
the <tr> tag is used to create table rows and <td> tag is used
to create data cells. The elements under <td> are regular and
left aligned by default

LESSON 4: HTML Table and Form

HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
The Attribute for TABLE

Tag Description
border="?" Thickness of outside border
bordercolor="#??????" Border Color
cellspacing="?" Space between cells (pixels)
cellpadding="?" Space between cell wall and content
align="??" Horizontal Alignment: left, center, right
bgcolor="#??????" Background Colour
width="??" Table Width (pixels or %)
height="??" Table Height (pixels or %)
The Attribute for <td>
Tag Description
border="?" Thickness of outside border
bordercolor="#??????" Border Color
cellspacing="?" Space between cells (pixels)
cellpadding="?" Space between cell wall and content
align="??" Horizontal Alignment: left, center, right
bgcolor="#??????" Background Color
width="??" Table Width (pixels or %)
height="??" Table Height (pixels or %)
bgcolor="#??????" Background Color
align="??" Horizontal Alignment: left, center, right
valign="??" Vertical Alignment: top, middle, bottom
nowrap Force no line breaks in a particular cell
 <table>
Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not
need a border, then you can use border = "0".
HTML Tags
<th>
• Table heading can be defined using <th> tag
• This tag will be put to replace <td> tag, which is used to
represent actual data cell.
• Headings, which are defined in <th> tag are center and bold by
default.

LESSON 4: HTML Table and Form

<th>
Cellpadding and Cellspacing Attributes
The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders
and the content within a cell.
Tables Backgrounds
•bgcolor attribute − You can set background-color for whole table or just for one cell.
•background attribute − You can set background image for whole table or just for one cell.
HTML Tags
Table Header, Body, and Footer
• The three elements for separating the head, body, and foot of a table are
−
1.<thead> − to create a separate table header.
2.<tbody> − to indicate the main body of the table.
3.<tfoot> − to create a separate table footer.
• A table may contain several <tbody> elements to indicate different pages
or groups of data. But it is notable that <thead> and <tfoot> tags should
appear before <tbody>

LESSON 4: HTML Table and Form

HTML FORMS
HTML Tags
Forms
• HTML Forms are required, when you want to collect some data from the
site visitor.
For example, during user registration you would like to collect information
such as name, email address, contact number, age, among other things.
In short, an HTML form is used to collect user input.
• A form will take input from the site visitor and then will post it to a back-
end application. The back-end application will perform required
processing on the passed data based on defined business logic inside
the application.

LESSON 4: HTML Table and Form

HTML Tags
Form Controls
There are different types of form controls that you can use to collect data using HTML
form −
•Text Input Controls
•Checkboxes Controls
•Radio Box Controls
•Select Box Controls
•File Select boxes
•Hidden Controls
•Clickable Buttons
•Submit and Reset Button

LESSON 4: HTML Table and Form

HTML Form Elements

Tag Description
<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

HTML Form Elements

Tag Description
<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

HTML Tags
Text Input Controls
1. Single-line text input controls − This control is used for items that require only one line
of user input, such as search boxes or names. They are created using HTML <input>
tag.

2. Password input controls − This is also a single-line text input, but it masks the
character as soon as a user enters it. They are also created using HTML <input> tag.

3. Multi-line text input controls − This is used when the user is required to give details
that may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.

LESSON 4: HTML Table and Form

Input Attributes
Following is the list of attributes for <input> tag and <password> tag .

Attribute Description
type Indicates the type of input control and for password input control it will
be set to password. and for text input control it will be set to text
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
value This can be used to provide an initial value inside the control.

size Allows to specify the width of the text-input control in terms of

characters.
maxlength Allows to specify the maximum number of characters a user can enter
into the text box.
<input>
Multiple-Line Text Input Controls
This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are
created using HTML <textarea> tag.

Attribute Description
name Used to give a name to the control which is sent to the server
to be recognized and get the value.
rows Indicates the number of rows of text area box.

cols Indicates the number of columns of text area box

<textarea>
Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but
type attribute is set to checkbox.

Attribute Description
Type Indicates the type of input control and for checkbox input control it will
be set to checkbox.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
value The value that will be used if the checkbox is selected.

checked Set to checked if you want to select it by default.

Checkbox
Radio Button Control
Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML
<input> tag but type attribute is set to radio.

Attribute Description
type Indicates the type of input control and for checkbox input control it will
be set to radio.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.

value The value that will be used if the radio box is selected.

checked Set to checked if you want to select it by default.

Radio Button
Select Box Control
A select box, also called drop down box which provides option to list down various options in the form of drop-down list, from
where a user can select one or more options.

Attribute Description
Name Used to give a name to the control which is sent to the server to be
recognized and get the value.
size This can be used to present a scrolling list box.

multiple If set to "multiple" then allows a user to select multiple items from the
menu.
Option
Following is the list of important attributes of <option> tag for Select Box Control

Attribute Description
value The value that will be used if an option in the select box box is selected.

selected Specifies that this option should be the initially selected value when the
page loads.

label An alternative way of labeling options

Select Box
File Upload Box
If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select
box. This is also created using the <input> element but type attribute is set to file.

Attribute Description
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
accept Specifies the types of files that the server accepts.
File Upload
Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input>tag by setting
its type attribute to button.

Atrribute Description
submit This creates a button that automatically submits a form.

reset This creates a button that automatically resets form controls to their initial
values.

button This creates a button that is used to trigger a client-side script when the
user clicks that button.

image This creates a clickable button but we can use an image as background of
the button.
Button
HTML Tags
Hidden Control
Hidden form controls are used to hide data inside the page which later on can be
pushed to the server. This control hides inside the code and does not appear on the
actual page.
For example, following hidden form is being used to keep current page number. When a
user will click next page then the value of hidden control will be sent to the web server
and there it will decide which page will be displayed next based on the passed current
page.

LESSON 4: HTML Table and Form

Hidden
Question and Answer