Lesson 10: Advance Table Tags
You can add other parameters to the table tags to control the outlook
of the table.
10.1 Table border
-
<table border=0> The table has no border
-
<table border=n> The table has a border
with size=n
10.2 Table colours
-
<table bgcolor=blue>
The table has blue background.
-
<tr bgcolor=green>
The row has green background.
-
<td bgcolor=yellow>
The cell has yellow background.
-
<table bordercolor=magenta> The
table a magenta border
-
<tr bordercolor=pink>
The row has pink border.
-
<td bordercolor=brown>
The cell has brown border.
* you could use hexadecimal code for the color attributes.
10.3 Table Height and Width
The parameters are
<table width="40%" height="20%">
10.4 Spacing in a Table
-
<table cellspadding=2> The amount of space between
a cell's border and its contents is 2
-
<table cellspacing=1> The
amount of space between the cells is 1.
10.5 Text alignment in a Table
-
<tr align=position>
Aligns the text in a row to the left, center or right
-
<tr valign=position>
Aligns the text in a row vertically (top, bottom or middle)
-
<td align=position>
Aligns the text in a cell to the left, center or right.
-
<td valign=position>
Aligns the text in a cell vertically(top, bottom or middle)
10.6 Rowspan and Colspan
-
<td rowspan=3>
The cell spans over 3 rows
-
< td colspan-2>
The cell spans over 2 columns.
10.7 Table Caption
This tag set the caption of the table.
<caption align=top>Caption</caption>
Example :
<html>
<head>
<title>Advance Table Tags</title>
<body bgcolor=FFDDEE>
<table border=5 cellspacing=0 cellspadding=2 bgcolor=blue
width=70% height=90%>
<caption align=top><h2>This is a colourful table</h2></caption>
<tr bgcolor=cyan bordercolor=green >
<td></td>
<td align=center valign=middle>Monday</td>
<td align=right valign=middle>Tuesday</td>
<td align=center valign=middle>Wednesday</td>
<td align=right valign=middle>Thursday</td>
</tr>
<tr>
<td rowspan=3 bgcolor=pink>Subject</td>
<td bgcolor=CC33FF>Management</td>
</tr>
<tr>
<td bgcolor=CC88BB>Finance</td>
<td bgcolor=BBFFEE>Business Law</td>
</tr>
<tr>
<td colspan=2></td>
<td bgcolor=9966CC>Economics</td>
<td bgcolor=88FFAA>HRM</td>
</tr>
</table>
</body>
</html>
|
Copy the codes above and paste them into your norepad. Save as table2.html
Click here for the sample output.
[Back to Main Page]