Tables Creating Tables: The TABLE Tag Needs To Bracket Your Table. All Example

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>
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><BR>
</FONT><BR>
</FONT><BR>
</FONT><BR>
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>
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
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>
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>

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>
<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>
</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>

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

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">
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>
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:
value=“mobile"> <br>
I have an ipod:
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">

Password
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password"
name="password">
</form>

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>
Textarea
<textarea rows="10" cols="30">
The Indian Institute Of &nbsp &nbsp

&nbsp &nbsp &nbsp &nbsp Planning &
Mgmt.
</textarea>

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: < or
<

Common Character Entities:

<
>
&
"
©
®

Tables Creating Tables: The TABLE Tag Needs To Bracket Your Table. All Example

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tables Creating Tables: The TABLE Tag Needs To Bracket Your Table. All Example

Uploaded by

Copyright:

Available Formats

TABLES

Web Development & Resource Mgmt. 12

Web Development & Resource Mgmt. 15

Web Development & Resource Mgmt. 16

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

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

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

Web Development & Resource Mgmt. 21

The Indian Institute Of &nbsp &nbsp

Web Development & Resource Mgmt. 24

Web Development & Resource Mgmt. 25

Web Development & Resource Mgmt. 26

You might also like