You are on page 1of 26

TABLES

Creating Tables:
The TABLE tag needs to bracket your table. All
other tags or text included in your table should nest
inside the TABLE tag.
Example:
<HTML>
<HEAD>
<TITLE> TABLE </TITLE>
</HEAD>
<BODY>
<TABLE>
……..
</TABLE>
</BODY>
</HTML> Web Development & Resource Mgmt. 1
Creating Columns and Rows
The TR (Table row) and TD (Table Data) tags are used to create a grid of rows
and columns.
Example:
<TABLE>
<TR>
<TD> 1 </TD>
<TD> IIPM </TD>
<TD>AHMEDABAD </TD>
<TD> GUJARAT </TD>
</TR>
<TR>
<TD> 2 </TD>
<TD> IIPM </TD>
<TD> NEW DELHI </TD>
<TD> DELHI </TD>

</TR>
</TABLE>
Web Development & Resource Mgmt. 2
Adding a Border:
By default, the table does not contain
a border. To include a border to the
table, specify a BORDER attribute
inside the TABLE tag.
Example:
<TABLE BORDER=“1”>
<TR><TD>1</TD><TD>IIPM</TD><TD>AHMEDA
BAD</TD><TD>GUJARAT</TD>
<TR><TD>2</TD><TD>IIPM</TD><TD>NEW
DELHI</TD><TD>DELHI</TD>
</TABLE>
Web Development & Resource Mgmt. 3
Adding Column Heading
The TH (Table heading) tag is used to define
a “cell” as a heading rather than as an
ordinary data cell. To create the heading
(column headings) at the top of the table,
first create a row using the TR tag and then,
use the TH tag to define the cells instead to
using the TD tags.
Example:
<TABLE BORDER=“1”>
<TR><TH>ROLL NO</TH><TH>FIRST NAME</TH>
<TH>LAST NAME</TH><TH> FEES
PAID</TH></TR>
<TR><TD>1</TD><TD>ADITYA</TD><TD>SING
H </TD></TR> Web Development & Resource Mgmt. 4
</TABLE>
Changing font sizes and colours
The FONT tag allows you to specify the size
and color of a section of a text.
Setting Font Sizes
The Font tag uses the SIZE attribute to change
the size of a font. You can set font sizes using
absolute or relative size values.
Setting Absolute Font Sizes
There are seven “absolute” (or fixed) sizes,
numbered from 1 to 7, that you can set using
the SIZE attribute of the FONT tag. The default
is 3, which is the same as regular paragraph
text; 1 is the smallest and
Web Development 7 is Mgmt.
& Resource the largest. 5
Example:
<BODY>
<P>
<FONT SIZE=“1”> Font Size 1.
</FONT><BR>
<FONT SIZE=“2”> Font Size 2.
</FONT><BR>
<FONT SIZE=“3”> Font Size 3.
</FONT><BR>
<FONT SIZE=“4”> Font Size 4.
</FONT><BR>
<FONT SIZE=“5”> Font Size 5.
</FONT><BR>
<FONT SIZE=“6”> Font Size 6.
Web Development & Resource Mgmt. 6
Setting Relative Font Sizes
You can set “relative” font sizes.
Relative font size changes are indicated
by either a plus (+) or (-) sign preceding
the SIZE attribute value. For instance,
FONT SIZE=“+1” indicates a font size
that is one size larger than the base
font.
Example:
<P>
<FONT SIZE=“-2”>Font Size -2.
</FONT>
Web Development & Resource Mgmt. 7
Changing the FONT Color
The FONT tag uses the COLOR attribute to change
the color of a font.
Setting the Font Color Using Color Names:
You can use any one of 16 color names to specify a
font color. Besides black and white, you also can
specify aqua, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal and
yellow.
Example:
<P><FONT SIZE=7>
<FONT COLOR=“AQUA”>
You can use any one of 16 color names to specify a
Web Development & Resource Mgmt. 8
font color.
Creating Hypertext Links
We use the A (Anchor) tag to anchor
one or both ends of a hypertext links.
We use the HREF (Hypertext
Reference) attribute to specify the URL
or address of the “object” of the link.

Syntax:
<A
HREF="http://www.mail.yahoo.com">Linkin
g to another page or file </A>
Web Development & Resource Mgmt. 9
ALIGNING the contents in the
TABLE
<BODY>
<TABLE border="1">
<TR>
<TH ALIGN=“LEFT">Money spent on....</TH>
<TH ALIGN=“RIGHT">January</TH>
<TH ALIGN=“RIGHT">February</TH>
</TR>
<TR>
<TD ALIGN=“LEFT">Clothes</TD>
<TD ALIGN=“RIGHT">RS. 241.10</TD>
<TD ALIGN=“CENTER">RS. 50.20</TD>
</TR>
</TABLE>
</BODY> Web Development & Resource Mgmt. 10
Nesting Of Tables and List
<table border="1">
<tr>
<td>
<p>This is a paragraph
<p>This is another paragraph
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td> Web Development & Resource Mgmt. 11
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples
<li>bananas
<li>pineapples
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

Web Development & Resource Mgmt. 12


Back Ground Color and Back Ground
Image in a Table
<html>
<body>
<h4>A background color: </h4>
<table border="1" bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
Web Development & Resource Mgmt. 13
<h4>A background image:</h4>
<table border="1"
background="bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
Web Development & Resource Mgmt. 14
</html>
Forms
Form elements are elements that allow
the user to enter information (like text
fields, drop-down menus, radio
buttons, checkboxes, etc.) in a form.
<form>
<input>
<input>
</form>

Web Development & Resource Mgmt. 15


Input
The type of input is specified with the
type attribute. The commonly used
input types are:
•Text Fields
•Radio Buttons
•Checkboxes

Web Development & Resource Mgmt. 16


Text Fields
Text fields are used when you want the
user to type letters, numbers, etc. in a
form.
<form>
First name:
<input type="text"
name="firstname"> <br>
Last name:
<input type="text"
name="lastname">
Web Development & Resource Mgmt. 17
Radio Buttons
Radio Buttons are used when you want
the user to select one of a limited
number of choices.
<form>
<input type="radio" name="sex"
value="male"> Male <br>
<input type="radio" name="sex"
value="female"> Female
</form>
Web Development & Resource Mgmt. 18
Checkboxes
Checkboxes are used when you want the user to
select one or more options of a limited number of
choices.
<form>
I have a laptop:
<input type="checkbox" name=“technology"
value=“laptop"> <br>
I have a mobile:
<input type="checkbox" name=“technology"
value=“mobile"> <br>
I have an ipod:
<input type="checkbox" name=“technology"
Web Development & Resource Mgmt. 19
value=“ipod"> </form>
Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the


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

<form name="input"
action="html_form_action.asp">

Username:

<input type="text" name="user">

<input type="submit" value="Submit">


Web Development & Resource Mgmt. 20
Password
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password"
name="password">
</form>

Web Development & Resource Mgmt. 21


Dropdown box
<form>
<select name=“bikes">
<option value=“Hero Honda">Hero
Honda</option>
<option value=“Honda">Honda</option>
<option value=“Yamaha">Yamaha</option>
<option value=“Pulsar">Pulsar</option>
</select>
</form> Web Development & Resource Mgmt. 22
Fieldset around data
<fieldset>
<legend>
Personal Data:
</legend>
<form action="">
Name <input type="text" size="3">
Age <input type="text" size="3">
</form>
</fieldset>
Web Development & Resource Mgmt. 23
Textarea
<textarea rows="10" cols="30">

The Indian Institute Of &nbsp &nbsp


&nbsp &nbsp &nbsp &nbsp Planning &
Mgmt.

</textarea>

Web Development & Resource Mgmt. 24


Character Entities
A character entity has three parts: an
ampersand (&), an entity name or a #
and an entity number, and finally a
semicolon (;).
To display a less than sign in an HTML
document we must write: &lt; or
&#60;

Web Development & Resource Mgmt. 25


Common Character Entities:
&nbsp;
&lt;
&gt;
&amp;
&quot;
&copy;
&reg;

Web Development & Resource Mgmt. 26