មេរៀនទី១៨: លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS

លំហាត់ទី១   ធ្វើយ៉ាងណាដើម្បីកំណត់អោយច្បាស់ ពីតារាង ទិន្នន័យអោយបានប្រសើរ?
 
សរសេរកូដ

through 2002″>

Yearly Income 1999 – 2002

	1999	2000	2001	2002

Grants
11,980
12,650
9,700
10,600


Donations
4,780
4,989
6,700
6,590


Investments
8,000
8,100
8,760
8,490


Fundraising
3,200
3,120
3,700
4,210


Sales
28,400
27,100
27,950
29,050


Miscellaneous
2,100
1,900
1,300
1,760


Total
58,460
57,859
58,110
60,700

លំហាត់ទី២  ធ្វើយ៉ាងណាដើម្បីបន្ថែម border ទៅក្នុងតារាង menu ដោយប្រើ HTHM border attribute?
 
សរសេរកូដ
.datatable {
border: 1px solid #338BA6;
}
.datatable td, .datatable th {
border: 1px solid #73C0D4;
}
លំហាត់ទី៣ ធ្វើយ៉ាងណាដើម្បីបង្ហាញ spreadsheet data អោយបានប្រសើរ?
 
សរសេរកូដ
p, td, th {
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.datatable {
border: 1px solid #D6DDE6;
border-collapse: collapse;
}
.datatable td {
border: 1px solid #D6DDE6;
text-align: right;
padding: 4px;
}
.datatable th {
border: 1px solid #828282;
background-color: #BCBCBC;
font-weight: bold;
text-align: left;
padding: 4px;
}
.datatable caption {
font: bold 0.9em “Times New Roman”, Times, serif;
background-color: #B0C4DE;
color: #33517A;
padding-top: 3px;
padding-bottom: 2px;
border: 1px solid #789AC6;
}
 
p, td, th {
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
លំហាត់ទី៤ ធ្វើយ៉ាងណាដើម្បីបង្ហាញ តារាង table rows មានព៌ណ?
 
សរសេរកូដ

Student List

Student Name	Date of Birth	Class	ID
Joe Bloggs	27/08/1997	Mrs Jones	12009
William Smith	20/07/1997	Mrs Jones	12010
Jane Toad	21/07/1997	Mrs Jones	12030
Amanda Williams	19/03/1997	Mrs Edwards	12021
Kylie Jameson	18/05/1997	Mrs Jones	12022
Louise Smith	17/07/1997	Mrs Edwards	12019
James Jones	04/04/1997	Mrs Edwards	12007

CSS to style
p, td, th {
font: 0.8em Arial, Helvetica, sans-serif;
}
.datatable {
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 80%;
}
.datatable td {
border: 1px solid #D6DDE6;
padding: 4px;
}
.datatable th {
border: 1px solid #828282;
background-color: #BCBCBC;
font-weight: bold;
text-align: left;
padding-left: 4px;
}
.datatable caption {
font: bold 0.9em Arial, Helvetica, sans-serif;
color: #33517A;
text-align: left;
padding-top: 3px;
padding-bottom: 8px;
}
.datatable tr.altrow {
background-color: #DFE7F2;
color: #000000;
}
លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បីប្តូរព៌ណ background color?
 
សរសេរកូដ
datatable tr:hover {
background-color: #DFE7F2;
color: #000000;
}
ប្រើ JavaScript ដើម្បីប្តូរ Classes

.datatable tr:hover, .datatable tr.hilite {
background-color: #DFE7F2;
color: #000000;
}

លំហាត់ទី៦ ធ្វើយ៉ាងណាដើម្បីបង្ហាញ calendar ដោយប្រើ CSS ?
 
សរសេរកូដ

June 2004

Monday	Tuesday	Wednesday	Thursday	Friday	Saturday	Sunday
31	1 New pupils open day Year 8 theatre trip	2	3	4	5	6
7 Year 7 English exam	8	9	10	11	12	13
14	15	16	17 Sports Day	18 Year 7 Parents’ evening Prizegiving	19	20
21	22	23	24 Year 8 parents’ evening	25	26	27
28	29	30 First Night of school play	1	2	3	4

body {
background-color: #ffffff;
color: #000000;
font-size: 90%;
}
.clmonth {
border-collapse: collapse;
width: 780px;
}
.clmonth caption {
text-align: left;
font: bold 110% Georgia, “Times New Roman”, Times, serif;
padding-bottom: 6px;
}
.clmonth th {
border: 1px solid #AAAAAA;
border-bottom: none;
padding: 2px 8px 2px 8px;
background-color: #CCCCCC;
color: #3F3F3F;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 110px;
}
.clmonth td {
border: 1px solid #EAEAEA;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px 4px 2px 4px;
vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
background-color: #F6F6F6;
color: #C6C6C6;
}
.clmonth td.active {
background-color: #B1CBE1;
color: #2B5070;
border: 2px solid #4682B4;
}
.clmonth ul {
list-style-type: none;
margin: 0;
padding-left: 12px;
padding-right: 6px;
}
.clmonth li {
margin-bottom: 8px;
}


June 2004

M
T
W
T
F
S
S



31
1
2
3
4
5
6


7
8 9
10
11
12
13


14
15
16
17
18
19
20


21
22
23
24
25
26
27


28
29
30
1
2
3
4


body {
background-color: #ffffff;
color: #000000;
font-size: 90%;
}
.clmonth {
border-collapse: collapse;
}
.clmonth caption {
text-align: left;
font: bold 110% Georgia, “Times New Roman”, Times, serif;
padding-bottom: 6px;
}
.clmonth th {
border: 1px solid #AAAAAA;
border-bottom: none;
padding: 2px 8px 2px 8px;
background-color: #CCCCCC;
color: #3F3F3F;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.clmonth td {
border: 1px solid #EAEAEA;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px 4px 2px 4px;
vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
background-color: #F6F6F6;
color: #C6C6C6;
}
.clmonth td.active {
background-color: #B1CBE1;
color: #2B5070;
border: 2px solid #4682B4;
}