Syllabus
Dr. NGPASC
COIMBATORE | INDIA 1
UNIT-III
TABLES:
HTML tables allow web developers to arrange data into
rows and columns.
A table in HTML consists of table cells inside
rows and columns.
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Dr. NGPASC
COIMBATORE | INDIA 2
UNIT-III
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
OUTPUT:
Emil Tobias Linus
Dr. NGPASC
COIMBATORE | INDIA 3
UNIT-III
TABLE ALIGNMENT:
The HTML <table> align Attribute is used to specify the
alignment of the table and its content.
Note : This attribute is not supported by HTML5.
Syntax:
<table align="left | right | center">
Attribute Values:
•left: It sets the left align to the table. It is a default value.
•right: It sets the right align to the table.
•center: It sets the center align to the table.
Dr. NGPASC
COIMBATORE | INDIA 4
UNIT-III
<!DOCTYPE html> <tr>
<html> <th>NAME</th>
<th>AGE</th>
<head> <th>BRANCH</th>
<title> </tr>
HTML table align Attribute <tr>
</title> <td>BITTU</td>
</head> <td>22</td>
<td>CSE</td>
<body> </tr>
<tr>
<table border="1“,align="right"> <td>RAM</td>
<td>21</td>
OUTPUT:
<caption>Author Details</caption> <td>ECE</td>
</tr>
</table>
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 5
UNIT-III
CELL ALIGNMENT:
By default, the content of <th> are center-aligned and the
content of <td> are left-aligned. We can override the attribute
by other to change the alignment.
We can also change the align-value to left and right.
Syntax
Following is the syntax to center align text in tag of the table.
<th style="text-align: center">Table header...</th>
Following is the syntax to center align text in <td> tag of the
table.
<td style="text-align: center">Table header...</td>
Dr. NGPASC
COIMBATORE | INDIA 6
UNIT-III
<!DOCTYPE html> <html>
<head>
<style> <td style="text-align:center">Paulo Coelho</td>
table, td, th { <td style="text-align:center">Robert
border: 1px solid black; Kiyosaki</td> </tr>
width: 300px; </table>
} </body>
</style> </html>
</head>
<body> <h1>Authors</h1> OUTPUT:
<table>
<tr> <th>Alchemist</th> AUTHORS
<th>Rich Dad Poor Dad</th>
Rich Dad
</tr> Alchemist
Poor Dad
<tr> Paulo Robert
Coelho Kiyosaki
Dr. NGPASC
COIMBATORE | INDIA 7
UNIT-III
Tables Backgrounds
You can set table background using one of the following two
ways −
•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.
Dr. NGPASC
COIMBATORE | INDIA 8
UNIT-III
<!DOCTYPE html> <tr>
<html> <td rowspan = "2">Row 1 Cell 1</td>
<head> <td>Row 1 Cell 2</td>
<title>HTML Table <td>Row 1 Cell 3</td>
Background</title> </tr>
</head> <tr>
<body> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td>
<table border = "1" </tr>
bordercolor = "green" <tr>
bgcolor = "yellow"> <td colspan = "3">Row 3 Cell 1</td>
<tr> </tr>
<th>Column 1</th> </table>
<th>Column 2</th> </body> OUTPUT:
<th>Column 3</th> </html>
</tr>
Dr. NGPASC
COIMBATORE | INDIA 9
UNIT-III
<!DOCTYPE html>
<html> <tr>
<head> <td rowspan = "2">Row 1 Cell 1</td>
<title>HTML Table <td>Row 1 Cell 2</td>
Background</title> <td>Row 1 Cell 3</td>
</head> </tr>
<body> <tr>
<table border = "1" <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td>
bordercolor = "green" </tr>
background = <tr>
"/images/[Link]"> <td colspan = "3">Row 3 Cell 1</td>
<tr> </tr>
<th>Column 1</th> </table>
<th>Column 2</th> </body>
<th>Column 3</th> </html> OUTPUT:
</tr>
Dr. NGPASC
COIMBATORE | INDIA 10
UNIT-III
FRAMES:
HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document. A collection of
frames in the browser window is known as a frameset. The window is
divided into frames in a similar way the tables are organized: into rows and
columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to
use frames in your webpages −
•Some smaller devices cannot cope with frames often because their screen is
not big enough to be divided up.
•Sometimes your page will be displayed differently on different computers
due to different screen resolution.
•The browser's back button might not work as the user hopes.
•There are still few browsers that do not support frame technology.
Dr. NGPASC
COIMBATORE | INDIA 11
UNIT-III
<!DOCTYPE html> <body>
<html>
<head>
Your browser does not support frames.
<title>HTML </body>
Frames</title> </head> </noframes>
<frameset cols = </frameset> </html>
"25%,50%,25%">
<frame name = "left" src =
"/html/top_frame.htm" />
<frame name = "center" OUTPUT:
src =
"/html/main_frame.htm" />
<frame name = "right" src
=
"/html/bottom_frame.htm"
/> <noframes>
Dr. NGPASC
COIMBATORE | INDIA 12
UNIT-III
INLINE FRAMES:
You can define an inline frame with HTML tag <iframe>. The
<iframe> tag is not somehow related to <frameset> tag,
instead, it can appear anywhere in your document. The
<iframe> tag defines a rectangular region within the document
in which the browser can display a separate document,
including scrollbars and borders.
An inline frame is used to embed another document within the
current HTML document.
The src attribute is used to specify the URL of the document
that occupies the inline frame.
Dr. NGPASC
COIMBATORE | INDIA
UNIT-III
HTML FORMS:
An HTML form is used to collect user input. The user input is most often
sent to a server for processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.
Dr. NGPASC
COIMBATORE | INDIA 14
UNIT-III
The <label> Element
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the
screen-reader will read out loud the label when the user focuses on
the input element.
The <label> element also helps users who have difficulty clicking
on very small regions (such as radio buttons or checkboxes) -
because when the user clicks the text within the <label> element,
it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to
the id attribute of the <input> element to bind them together.
Dr. NGPASC
COIMBATORE | INDIA 15
UNIT-III
Text Fields
The <input type="text"> defines a single-line input field for text
input.
Example
A form with input fields for text:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
OUTPUT:
</form>
Dr. NGPASC
COIMBATORE | INDIA 16
UNIT-III
TEXTAREA:
The <textarea> tag defines a multi-line text input
control.
The <textarea> element is often used in a form, to
collect user inputs like comments or reviews.
A text area can hold an unlimited number of
characters, and the text renders in a fixed-width font
(usually Courier).
Dr. NGPASC
COIMBATORE | INDIA 17
UNIT-III
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="textarea" name="textarea"
rows="4" cols="50">
Enter txt here...
</textarea> OUTPUT:
</body>
</html>
Dr. NGPASC
COIMBATORE | INDIA 18
UNIT-III
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on
the type attribute.
Here are some examples:
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
Dr. NGPASC
COIMBATORE | INDIA
19
UNIT-III
BUTTONS IN FORMS
The <button> tag defines a clickable button.
Inside a <button> element you can put text (and tags
like <i>, <b>, <strong>, <br>, <img>, etc.). That is not
possible with a button created with
the <input> element!
Tip: Always specify the type attribute for
a <button> element, to tell browsers what type of
button it is.
Dr. NGPASC
COIMBATORE | INDIA 20
UNIT-III
<!DOCTYPE html>
<html>
<body>
<h1>The button Element</h1>
<buttontype="button">Submit</button>
<button type="button" >Reset</button>
</body>
</html> OUTPUT:
Dr. NGPASC
COIMBATORE | INDIA 21
UNIT-III
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number
of choices.
Example
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form> OUTPUT:
Dr. NGPASC
COIMBATORE | INDIA 22
UNIT-III
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form> OUTPUT:
Dr. NGPASC
COIMBATORE | INDIA 23
UNIT-III
HTML List Box
The list box is a graphical control element in the HTML
document that allows a user to select one or more options
from the list of options.
Syntax
<select Name="Name_of_list_box" Size="Number_of_option
s">
<option> List item 1 </option>
<option> List item 2 </option>
<option> List item 3 </option>
<option> List item N </option>
</select>
Dr. NGPASC
COIMBATORE | INDIA 24
UNIT-III
<select name="Cars" size="5">
<option value="Merceders"> Merceders </option
>
<option value="BMW"> BMW </option>
<option value="Jaguar"> Jaguar </option>
<option value="Lamborghini"> Lamborghini </opt
ion>
<option value="Ferrari"> Ferrari </option>
OUTPUT:
<option value="Ford"> Ford </option>
</select>
Dr. NGPASC
COIMBATORE | INDIA 25
UNIT-III
HIDDEN INPUT IN FORMS:
The <input type="hidden"> defines a hidden
input field.
A hidden field lets web developers include data
that cannot be seen or modified by users when a
form is submitted.
A hidden field often stores what database record
that needs to be updated when the form is
submitted.
Dr. NGPASC
COIMBATORE | INDIA 26