HKDSE ICT Book C2 Chapter 4
Lesso n 4 on HTM L
<BODY> Section of a HTML File
lnserting Tables
ln HTML, creating a table is quite a complex process. The structure of creating a HTML table is as follows,
table bord€f tt For simple representation of the HTML code and the final
< =" f. >
output, the table is shown with different background colour.
< tr> There should not be any background colour based on the given
<td>sA< / Ed> code however.
</trr>
<tr>
<td>Woo Chung Yan< /Ed>
5A
Woo Chung Yan Chim Suet Ling
l
</t-r>
<tr>
<td>chan Hoi Kei</trd>
<td>Tong Man Chung, ,Jacky</ td>
</trr>
< / tabre>
More descriptions to the above tags are shown below:
HTML Tag Description Sample HTML Code
Table row
< tr> t To make a table row there must be <tr> (See the above demo)
< / tr> tags.
Table cell
<td> t The <td> enables you to enter content into (See the above demo)
the cell.
lf you want to table header (first row of the table)
<th> to be in bold and/or with special features, you can Nil
use <th> instead of <td>.
Supplementary lnformation for <table> attributes:
HTML Tag Description
<tab1e width = 10 Opx" > rt
To specify that the width of the table is exactly
<tabIe width = tt10Oeo") 1,00 pixels or LOO% (full screen width).
< table bord€r= rr 1 rt width= tr L 0 0 eo" )
< tr>
<td width= rr 7 Oeotr >Firstname< / td>
<td width= rr 20%tr >Lastname< / td>
< td width= rr 10 " >Age < / Ed>
eo
< / t-r>
< tr>
<td>Erie< /Ed> ,Fil'srrlatlre
.
rlastnanre Ag*
< td>Tsang< / t-d> lr'*s-lto
<td>Lo< /Ed> iracky- lTong i:o
</tr>
<tr>
<td>ilacky< / td>
<td>Tong < / trd>
<td>20< / Ed>
</Er>
< / tabre>
HTML Tag Description
<table height = "L0Opx"> To specify that the height of the table is exactly
< table height = " 10 Oeo " ) 100 pixels or LOO% (full screen width).
< table bord€f =
rt 1 !r height= II f- 0 0%
">
<tr height= It 8 0'"\
<td>Firstnam e</;;\
<td>Lastname< / ta>
<td>Age< /trd>
</Er>
<tr height=rrf-Oo"ti
\
<td>Eric< /trd> \ Firstname Lastname Age
\'
< td>Tsang< / Ed>
- LO}%
<td>L0 < / r-d>
</trr>
< tr height= rr f.0% "
<td>'Jaeky< / t,d>
<td>Tong< /trd>
<td>20< / t-d>
\ Eric Tsang tt)
</trr>
< / tabre> \ Jaeky Tong :0
HTML Tag Description
<tab1e border = 1!r >
rr
To specify the width of the border of the table.
<table align = r'Ief t I eenter I rightr! > To align the whole table (or a particular row or
<tr align = rtleft I eenter I rightrr > cell) on the left, c€nter or right.
<t,d align = rrlef t I center I right t' >
<table bgcolor = 'rgdtr > To define the background color of the table (or a
<table bgcolor = " #xxxxxxtr > particular row or cell), either a colour keyword
#9E9E t (e.9. black, red, green etc) or ',,
il iin:..,. Sftr"jii ,,,..,.i..
<table baekground = tt IMG 9222 .,JPGtt > To define the background of the table (or a
particular row or cell) from an image source.
<tabIe bordereolor = rI redtr > To define the border color of the table, either a
<table bordercolor = t'#xxxxxx '! > colour keyword (e.g. black, red, green etc) or a 6-
digit i-lexad*e ima I RGB code.
<tab1e cellspacing = rt lpxrr > To specify the spacing between cells.
<tab1e eellspacing = r'2 0pxrr >
Wf,.r$ t*: (1 px)
Lastnarne
(20 px)
<table cellpadding = rr lpxtr > To specify the margin (trrfl) between the text and
<table eellpadding = rt 2 0pxrt > the cell.
t
L*tr*r*f"*
Eric lTsang
iTsang ii t 0
J*clry l*- (1 px)
m
1+rirtb-"*-l Lasrname Age
rt
Eric
Ja*iry
EFTor:g i0
(20 px)
rowspan To span (merge) cells from multiple rows together.
t For example: First**file Lastname iAS.
<tabIe border= rr
1tt >
"l*:il:!7:l5 Tsang
i''^:'
</Er>
<tr>
<td rowsp?fr= it2tr >Eri c</ td>
<td>Gu< / td>
<td>L7</trd> The text "Eric"
</Er> will span
<t,r> (occupy) two
<td>Tsang< / trd>
rows. Therefore,
<td> 20< / Ed>
only 2 horizontal
</Er>
cells (lastname &
< / table>
age) are needed
eolspan To span (merge) cells from multiple columns together.
) For example: Firstnanle
<table border= rt 1rr >
"lil:H!;:#:;('":'
</t-.r>
< tr>
<td colsfan= tt2tt >Gurr</tr!>
<td>37 </Ed>
</tr>
<tr>
<td>Alex< / Ed> The text "Gurr" will
<td>wong< / trd> span (occupy) two
<td> 20< / trd> columns. Therefore,
</trr> only 1 table cell
< / tabre> (aee) is needed for
this row.
Classwork of Today:
Display the following information:
Title of the web page: 5A99 CW4
H e ader
