Scribd
Upload
5 views

Web Design

Different types of tags and attributes for dse

Uploaded by

mattchan0531
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Web Design

Different types of tags and attributes for dse

Uploaded by

mattchan0531
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like