Creating a simple Table
<Table>
<TR>
<TD>..........<TD>...........<TD>.............
<TR>
<TD>............<TD>.........<TD>..............
.............................................................................
.............................................................................
<TR>
<TD>............<TD>.........<TD>..............
</Table>
Table
• <Table>:Defines a table
• <TR>:Defines the beginning of a row(TR: Table Row).
• <TD> or <TH>:Defines a cell within a row(TD: Table Data, TH: Table Head).
Example(Simple Table)
<html><head>
<title>UNIVERSITY OF BATTAMBANG</title></head>
<body>
<Table>
<Tr><td>One<td>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
Attribute Align
<Table Align=[left, right, center]>
..............................
</Table>
Example (Align)
<html><head>
<title>UNIVERSITY OF BATTAMBANG</title>
</head>
<body>
<Table Align=center>
<Tr><td>One<td>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
Attribute Border and Bordercolor
<Table border=n bordercolor=“colorname or colorcode>
Example(Border)
<html><head>
<title>UNIVERSITY OF BATTAMBANG</title></head>
<body>
<Table border=1>
<Tr><td>One<td>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
Example(Bordercolor)
<html><head>
<title>UNIVERSITY OF BATTAMBANG</title></head>
<body>
<Table border=1 bordercolor="blue">
<Tr><td>One<td>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
Attribute bordercolorlight
<html><head>
<title>UNIVERSITY OF BATTAMBANG</title></head>
<body>
<Table border=1 bordercolor="blue" bordercolorlight="00ff00">
<Tr><td>One<td>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
Setting the Table Width
<Table Border=1 Width=[N,N%]>
...........................................................
</Table>
Example(Table width)
<html><head>
<title>UNIVERSITY OF BTTAMBANG</title></head>
<body>
<Table border=1 width=100%>
<Tr><td>One<td>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
</body></html>
The Frame Attribute
Table Frame=[void, above, below, hsides, vsides, lhs, rhs, box]>
• Void: for no external borders
• Above: for a single border on top
• Below: for a single border on bottom
• Hsides: for a border on both the top and bottom sides
• Vsides: for a border on both right and left
• rhs: for a single border on the right side
• lhs: for a single border on the left side
• box or border: for a border on all sides (default)
Example(Table Frame)
<html>
<head><title>UNIVERSITY OF BATTAMBANG</title></head>
<body>
<Table border=2 width=100% frame=void>
<Tr><td width=40%>One<td width=45%>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
The cellpadding and cellspacing Attribure
<Table cellspacing=x Cellpadding=y>
Example(Cellspacing)
<html><head>
<title>UNIVERSITY OF BATTAMBANG</title></head>
<body>
<Table Align=center border=1 cellspacing=5 >
<Tr><td>One<td>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
Example(Cellpadding)
<html><head>
<title>UNIVERSITY OF BATTAMBANG</title></head>
<body>
<Table Align=center border=1 cellspacing=5 cellpadding=20 >
<Tr><td>One<td>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
II. Setting the Width for Individual Cell
<TD Width=[N,N%]>
Example(Using TD Width)
<html><head>
<title>UNIVERSITY OF BATTAMBANG</title></head>
<body>
<Table border=2 width=100%>
<Tr><td width=40%>One<td width=45%>Two<td>Three
<Tr><td>Four<td>Five<td>Six
<Tr><td>Seven<td>Eight<td>Nine
<Tr><td>Ten<td>Eleven<td>Twelve
</Table>
</body></html>
