TABLE HANDLING
By
M.HEMAMALINI
TABLES
How to write HTML codes for showing tables in a web
page
Tables are very efficient means of displaying
information in a concise and precise form.
Instead of writing several pages of explanation a
table can effectively give all necessary information.
SAMPLE TABLE
ADMISSION 1997 -98
Course OC BC MBC SC/ST Total
Computer 9 18 5 5 37
science
Commerce 14 25 6 5 50
Mathematics 12 20 4 4 40
Physics 11 19 5 5 40
Chemistry 12 18 5 5 40
This table shows the distribution of students
admitted to various courses.
The column “OC” gives the number of the
open competition category.
The column “BC” gives the number of
Backward class students.
The following are the components of a table
Table caption
Table heading row
Rows and columns
“Admission 1997 -98” is the table caption.
The table heading row is
Course OC BC MBC SC/ST Total
TABLE CREATION IN HTML
In HTML the beginning of a table is marked
by the <TABLE> tag and the end is marked
by the </TABLE> tag.
If we want a border for our table, we must
give the beginning tag as <TABLE BORDER>
If we want a bigger , we can also give
numbers to represent the size of the border.
For example <TABLE BORDER = 5> Will give
a bigger border
The caption for the table must be given with
the <Caption> tag .
In our table , the caption is “Admission 1997-
98”
<caption> Admission 1997 -98 </caption>
The heading row is also a row of the table.
Each row of the table must be given with
<tr> (table row) tag.
The table heading in each column must be
given with a <th> (table heading) tag.
The heading row must be coded in an HTML document as
follows.
<tr><th> Course <th>OC<th> MBC <th> SC <th> total
The first row of the table is heading row; and each entry was
given with the <th> table head tag.
The entries in the other rows are called table data, and
entered with the <td> tag.
However each row must begin with the <tr> tag.
The next row of the table is coded as
<tr><td>Computer science <td>9 <td>18 <td>5 <td> 5
Computer
<td>37 9 18 5 5 37
Science
The next row is
<tr><td>Commerce <td> 14<td>25 ,td> 6<td>
5<td>50
The next three rows are
<tr><td>
Mathematics<td>12<td>20<td>4<td>4<td>40
<tr><td>
Physics<td>11<td>19<td>5<td>5<td>40
<tr><td>
Chemistry<td>12<td>18<td>5<td>5<td>40
<html>
<head>
<title> Table Handling </title>
</head>
<body>
<table border = 5>
<caption> Admission 1997 -98 </caption>
<tr><th> Course <th>OC<th> MBC <th> SC <th> total
<tr><td>Computer science <td>9 <td>18 <td>5 <td> 5 <td>37
<tr><td>Commerce <td> 14<td>25 ,td> 6<td> 5<td>50
The next three rows are
<tr><td> Mathematics<td>12<td>20<td>4<td>4<td>40
<tr><td> Physics<td>11<td>19<td>5<td>5<td>40
<tr><td> Chemistry<td>12<td>18<td>5<td>5<td>40
</table>
</body>
</html>
WIDTH OF THE TABLE AND CELLS
The width of the table can also be specified in the
HTML document.
The width specification is only optional.
We measure the width in any one of the following
units
En Unit : one en is 50 per cent of the width of the
character M in the usual font and size.
Pixels : in VGA mode resolution the screen has 640
x 480 pixels.
Relative : this unit specifies the percentage of the
window as the width.
<TABLE BORDER UNITS = en Width = 60>
Width of the table 60 en units.
<TABLE BORDER UNITS = pixels width = 300>
Width of the table is 300 pixels
Consider the code
<TABLE BORDER = 5 UNITS = relative width =
75 %>
The table width is defined as 75 per cent of the
total window width.
Alignment
The data in each cell is aligned left by
default.
We can define any one of the following as the
alignment for each cell.
Leftalignment
Right alignment
Center alignment
Decimal alignment
This can be given as string in the <table>
tag itself.
<table border units = en COLSPEC = “L10
L10 R30 C20 R30”>
The attribute for column specification is
The first “L10” defines that the data in the first
column is left aligned and has a width of 10 en
units.
The second “L10” defines that the data in the
second column is also left aligned and has a
width of 10 en units.
The third entry “R30” defines that the third
column has a width of 30 en units and its data are
right aligned.
The fourth entry “C20” defines that the fourth cell
is of 20 en units width and the data are center
aligned.
CELLS SPANNING MULTIPLE ROWS
/COLUMNS
Car Price
Maruti Omni van 2,00,000
Maruti 800 2,42,000
Maruti 1000 3,10,000
Maruti zen 3,90,000
Sumo 4,75,000
Sierra 4,47,000
Estate 4,62,000
Petrol 3,24,000
Diesel 3,87,000
CELLS SPANNING MULTIPLE ROWS
/COLUMNS
This table has the caption “Car Price List”.
We want it to appear in bold and italics.
We must add the <b> and <i> tags to the
caption.
We begin the HTML document as
<table>
<caption>
<b><i> Car price List </i></b>
</caption>
In this table the header has only two columns.
In fact the first column of the header row spans a width
of two columns .
The header row is represented in the HTML document is
<tr> <th colspan = 2 > car <th> price
The attribute colspan = 2 tells us that this header spans
two columns.
Then the cell having “MAruti” spans four rows as shown
below
Maruti Omni van 2,00,000
Maruti 800 2,42,000
Maruti 1000 3,10,000
Maruti zen 3,90,000
<tr> <td rowspan = 4> Maruti <td> Omni van <td>
2,00,000
<tr><td> Maruti 800 <td> 2,42,000
<tr><td> Maruti 1000 <td> 3,10,000
<tr><td> Maruti zen <td> 3,90,000
The next row, “Tata” spans three rows, shown as follows.
<tr> <td rowspan = 3> Tata <td> Sumo <td> 4,75,000
<tr><td> sierra <td> 4,70,000
<tr> <td> estate <td> 4,62,000
Tata Sumo 4,75,000
Sierra 4,47,000
Estate 4,62,000
The subsequent row as shown below
<tr><td rowspan = 2 > Ambassador <td> Petrol <td>
3,24,000
<tr><td>Diesel <td> 3,87,000
Ambassa Petrol 3,24,000
dor
Diesel 3,87,000
<html>
<head>
<title> Car Price </title>
</head>
<body>
<table>
<caption>
<b><i> Car price List </i></b>
</caption>
<tr> <th colspan = 2 > car <th> price
<tr> <td rowspan = 4> Maruti <td> Omni van <td> 2,00,000
<tr><td> Maruti 800 <td> 2,42,000
<tr><td> Maruti 1000 <td> 3,10,000
<tr><td> Maruti zen <td> 3,90,000
<tr> <td rowspan = 3> Tata <td> Sumo <td> 4,75,000
<tr><td> sierra <td> 4,70,000
<tr> <td> estate <td> 4,62,000
<tr><td rowspan = 2 > Ambassador <td> Petrol <td> 3,24,000
<tr><td>Diesel <td> 3,87,000
</table>
</body>
</html>
The HTML document to create this table as
follows
<html>
<head>
<title> Car Price </title>
</head>
<body>
<table border = 5>
<caption>
<b><i> Car price List </i></b>
</caption>
<tr> <th colspan = 2 > <b> Maruti
<tr><td> Omni van <td> 200000
<tr><td> Maruti 800 <td> 2,42,000
<tr><td> Maruti 1000 <td> 3,10,000
<tr><td> Maruti zen <td> 3,90,000
<tr> <td colspan = 2> <b>Tata </b>
<tr><td> Sumo <td> 4,75,000
<tr><td> sierra <td> 4,70,000
<tr> <td> estate <td> 4,62,000
<tr><td colspan = 2 >
<b>Ambassador </b>
<tr><td> Petrol <td> 3,24,000
<tr><td>Diesel <td> 3,87,000
</table>
</body>
</html>
<html>
<head>
<title> Car Price </title>
</head>
<body>
<table border = 5>
<caption>
<b><i> Car price List </i></b>
</caption>
<tr> <th colspan = 2 > <b> Maruti
<th colspan = 2 > Tata <th colspan = 2> Ambassador </b>
<tr> <th> Model <th> Price <th> Model
<th> Price <th> Model <th> Price
<tr><td> Omni <td> 200000
<td> sumo <td> 470500
<td> Petrol <td> 324000
<tr><td> maruti 800 <td> 242 000
<td> Sierra <td> 387000
<td> Diesel <td> 387000
<tr><td> maruti 1000 <td> 365900 <td> Estate <td> 462000 <td> <td>
<tr><td> Maruti zen <td> 387900 <td> <td> <td>
</Table>
</body>
</html>
TABLE WIDTH AND ALIGNMENT OF CELL
ELEMENTS
When HTML is written for a table, the browser takes
care of the width of the table.
The width is conveniently designed by the browser
itself.
Consider the table
<table><caption> Admission 1997-98 </caption>
<th> Community
<tr><th> Male <th> Female
<tr><td> OC <td> 35 <td> 15
<tr><td> BC <td> 50 <td> 72
<tr> <td> SC/ST <td> 12 <td> 15
</table>
The browser displays this table as a small
one
We can change the width of the table by
using the width attribute in the table tag.
The width of the table measured in any one
of the following units
En units
Pixels
Relative
If we want to have width of a table as 200 en
units , then the <table> tags must be given
as
<table units = en width = 200>
If we want to have the width of the table as 275
pixels , we must represent it in the <table> tag as
shown below
<table units = pixels width = 275>
The relative unit specifies the width as a
percentage of the width of the window.
If we want to have the width of our table as 80
percent of the window of the browser, we must give
the <table> as follows.
<table width = 80 %>
<table border = 5 width = 80%>
<caption> Admission 1997 -98 </caption>
<th> Community <th> Male <th> Female
<tr> <td> OC <td> 35 <td> 15
<tr> <td> BC <td> 50 <td> 72
<tr><td> SC/ST <td> 12 <td> 15
</table>
ALIGNMENT
The data in any cell of the table are always
left aligned in the default mode.
The alignment can be changed using the
align attribute in the <td> tag.
For example
<td align = center> BC
Will center the text BC in the cell as shown
below
<table border =5 width = 80%>
<caption> Admission 1997-98 </caption>
<tr> <th align = center> Community
<th align = right> Male <th align = right>
Female
<tr> <td align = center> OC <td align =
right > 35 <td align = right > 15 <tr><td
align = center> BC <td align = right> 50
<td align = right> 72
<tr><td align = center> SC/ST <td align =
right> 12 <td align = right> 15
</table>
COLORING CELLS
Each cell can be assigned a background color
using the bgcolor attribute.
If we want a particular cell to have
background color, the <td> tag must be
given as follows
<td bgcolor = “#ff0000”>
Consider the table. It has three columns.
If we want the first column to be red in color,
the second in green and the third in blue.
<table border = 5 width = 80%>
<caption> Admission 1997-98 </caption>
<tr><th bgcolor = ff0000 align = center> Community <th bgcolor = #00ff00
align = right > Male
<th bgcolor = #0000ff align = right > Female
<tr><th bgcolor = ff0000 align = center> OC
<th bgcolor = #00ff00 align = right > 35
<th bgcolor = #0000ff align = right > 15
<tr><th bgcolor = ff0000 align = center>
BC <th bgcolor = #00ff00 align = right > 50
<th bgcolor = #0000ff align = right > 72
<tr><th bgcolor = ff0000 align = center> SC/ST
<th bgcolor = #00ff00 align = right > 12
<th bgcolor = #0000ff align = right > 15
</table>
COLUMN SPECIFICATION
We can also align the text using a string
which represents the alignment and size of
each cell.
This cell must be given in the <table> tag
itself as an attribute.
There are 3 columns. The first column is
center aligned .
If its width is to be 140 pixels then we denote
it by C140.
The units must already have been declared
as
<table units = pixels..>
Center alignment is denoted by the “C” and
140 denotes the width as 140 pixels.
The second and third columns are right-
aligned.
We can specify their width as “R200”
The <table > tag must be represented as
<table border units = pixels colspec = “C140
R200 R200”>
The following notations are followed for
alignment in the column specification
L denotes left alignment
R denotes Right alignment
C denotes Center alignment
D denotes Decimal alignment
Decimal alignment aligns the numbers with
decimal points in a table.
The table tag
<table border units = pixels colspec = “C50,
D200,D200”>
SAMPLE TABLES
<table border = 10 bgcolor = #ffff00 text = #ffffff>
<caption> EXPENDITURE </caption>
<tr><td rowspan = 2 align = center> <b> Rent </
b>
<td> shop <td align = right > 2500
<tr><td> House <td align = right > 1500
<tr><td rowspan = 2 align = center . <b> Food
,/b>
<td> Purchase <td align = right> 1200
<tr><td> Hotel <td align = right> 2400 <tr><td
rowspan = 3><b> vehicles </b>
<td> Bike <td align = right > 1400
<tr><td> Car <td align = right> 200
<tr><td> Cycle <td align = right> 2400
<tr><td colspan = 2 slign = center<b> TOTAL
