លំហាត់ CSS-តារាងបញ្ជីទិន្នន័យ
លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
លំហាត់ទី១ ធ្វើយ៉ាងណាដើម្បីកំណត់អោយច្បាស់ ពីតារាង ទិន្នន័យអោយបានប្រសើរ?
សរសេរកូដ<table summary=”This table shows the yearly income for years 1999
through 2002″>
<caption>Yearly Income 1999 – 2002</caption>
<tr>
<th></th>
<th scope=”col”>1999</th>
<th scope=”col”>2000</th>
<th scope=”col”>2001</th>
<th scope=”col”>2002</th>
</tr>
<tr>
<th scope=”row”>Grants</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope=”row”>Donations</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope=”row”>Investments</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope=”row”>Fundraising</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope=”row”>Sales</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope=”row”>Miscellaneous</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope=”row”>Total</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
លំហាត់ទី២ ធ្វើយ៉ាងណាដើម្បីបន្ថែម 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 មានព៌ណ?
សរសេរកូដ<table summary=”List of new students 2003″>
<caption>Student List</caption>
<tr>
<th scope=”col”>Student Name</th>
<th scope=”col”>Date of Birth</th>
<th scope=”col”>Class</th>
<th scope=”col”>ID</th>
</tr>
<tr>
<td>Joe Bloggs</td>
<td>27/08/1997</td>
<td>Mrs Jones</td>
<td>12009</td>
</tr>
<tr>
<td>William Smith</td>
<td>20/07/1997</td>
<td>Mrs Jones</td>
<td>12010</td>
</tr>
<tr>
<td>Jane Toad</td>
<td>21/07/1997</td>
<td>Mrs Jones</td>
<td>12030</td>
</tr>
<tr>
<td>Amanda Williams</td>
<td>19/03/1997</td>
<td>Mrs Edwards</td>
<td>12021</td>
</tr>
<tr>
<td>Kylie Jameson</td>
<td>18/05/1997</td>
<td>Mrs Jones</td>
<td>12022</td>
</tr>
<tr>
<td>Louise Smith</td>
<td>17/07/1997</td>
<td>Mrs Edwards</td>
<td>12019</td>
</tr>
<tr>
<td>James Jones</td>
<td>04/04/1997</td>
<td>Mrs Edwards</td>
<td>12007</td>
</tr>
</table>
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;
}
<script type=”text/javascript”>
var rows = document.getElementsByTagName(‘tr’);
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.className += ‘ hilite’;
}
rows[i].onmouseout = function() {
this.className = this.className.replace(‘hilite’, ”);
}
}
</script>
លំហាត់ទី៦ ធ្វើយ៉ាងណាដើម្បីបង្ហាញ calendar ដោយប្រើ CSS ?
សរសេរកូដ<table summary=”Calendar for June 2004″>
<caption>June 2004</caption>
<tr>
<th scope=”col”>Monday</th>
<th scope=”col”>Tuesday</th>
<th scope=”col”>Wednesday</th>
<th scope=”col”>Thursday</th>
<th scope=”col”>Friday</th>
<th scope=”col”>Saturday</th>
<th scope=”col”>Sunday</th>
</tr>
<tr>
<td>31</td>
<td>1
<ul>
<li>New pupils open day</li>
<li>Year 8 theatre trip</li>
</ul>
</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7
<ul>
<li>Year 7 English exam</li>
</ul>
</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17
<ul>
<li>Sports Day</li>
</ul>
</td>
<td>18
<ul>
<li>Year 7 Parents’ evening</li>
<li>Prizegiving</li>
</ul>
</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24
<ul>
<li>Year 8 parents’ evening</li>
</ul>
</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30
<ul>
<li>First Night of school play</li>
</ul>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
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;
}
<table class=”clmonth” summary=”Calendar for June 2004″>
<caption>June 2004</caption>
<tr>
<th scope=”col”>M</th>
<th scope=”col”>T</th>
<th scope=”col”>W</th>
<th scope=”col”>T</th>
<th scope=”col”>F</th>
<th scope=”col”>S</th>
<th scope=”col”>S</th>
</tr>
<tr>
<td class=”previous”>31</td>
<td class=”active”>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class=”active”>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
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;
}
Post a Comment