តារាង HTML ត្រូវបានកំណត់ដោយស្លាក <តារាង> ។
ជួរដេកនីមួយៗត្រូវបានកំណត់ដោយស្លាក <tr> ។ បឋមកថាតារាងត្រូវបានកំណត់ដោយស្លាក <th> ។ តាមលំនាំដើមក្បាលតារាងគឺដិតនិងកណ្តាល។ ទិន្នន័យតារាង / ក្រឡាត្រូវបានកំណត់ដោយស្លាក <td> ។
ឧទាហរណ៍
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
តារាង HTML
- បន្ថែមស៊ុមមួយ
បើអ្នកមិនបញ្ជាក់ស៊ុមសម្រាប់តារាងវានឹងត្រូវបានបង្ហាញដោយគ្មានស៊ុម។
ស៊ុមត្រូវបានកំណត់ដោយប្រើលក្ខណសម្បត្តិ ស៊ុម CSS:
ឧទាហរណ៍
table, th, td {
border: 1px solid black;
border: 1px solid black;
តារាង HTML - ព្រំដែនដែលបានបង្រួម
ប្រសិនបើអ្នកចង់ស៊ុមទម្លាក់ចូលទៅក្នុងស៊ុមមួយបញ្ចូលលក្ខណសម្បត្តិ ស៊ុម CSS -collapse :
ឧទាហរណ៍
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
border: 1px solid black;
border-collapse: collapse;
}
តារាង HTML
- បន្ថែមបន្ទះក្រឡា
ចន្លោះក្រឡាបញ្ជាក់ចន្លោះរវាងមាតិកាក្រឡានិងស៊ុមរបស់វា។
ប្រសិនបើអ្នកមិនបញ្ជាក់ចន្លោះមួយទេក្រឡាតារាងនឹងត្រូវបានបង្ហាញដោយគ្មានចន្លោះ។
ដើម្បីកំណត់គែមប្រើលក្ខណៈ CSS padding :
ឧទាហរណ៍
th, td {
padding: 15px;
}
padding: 15px;
}
តារាង HTML
- ក្បាលឆ្វេង
- តម្រឹម
តាមលំនាំដើមក្បាលតារាងគឺដិតនិងកណ្តាល។
ដើម្បីតម្រឹមកថាខណ្ឌខាងឆ្វេង តម្រឹម លក្ខណសម្បត្តិ អត្ថបទ CSS:
ឧទាហរណ៍
th {
text-align: left;
}
text-align: left;
}
តារាង HTML
- បន្ថែមគម្លាតស៊ុម
គម្លាតព្រំដែនបញ្ជាក់ចន្លោះរវាងកោសិកា។
ដើម្បីកំណត់គម្លាតស៊ុមសម្រាប់តារាងប្រើលក្ខណសម្បត្តិ បន្សំ CSS:
ឧទាហរណ៍
table {
border-spacing: 5px;
}
border-spacing: 5px;
}
តារាង HTML
- ក្រឡាដែលមានជួរឈរជាច្រើន
ដើម្បីធ្វើឱ្យកោសិកាមានប្រវែងច្រើនជាងមួយជួរសូមប្រើគុណលក្ខណៈ colspan :
ឧទាហរណ៍
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
តារាង HTML
- ក្រឡាដែលរុំជួរជាច្រើន
ដើម្បីបង្កើតក្រឡាជាងជួរដេកមួយសូមប្រើគុណលក្ខណៈ rowspan :
ឧទាហរណ៍
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
តារាង HTML
- បន្ថែមចំណងជើង
ដើម្បីបន្ថែមចំណងជើងមួយទៅតារាងប្រើស្លាក <caption> :
ឧទាហរណ៍
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
រចនាប័ទ្មពិសេសសម្រាប់តារាងមួយ
ដើម្បីកំណត់រចនាប័ទ្មពិសេសសម្រាប់តារាងពិសេសបន្ថែមគុណលក្ខណៈ លេខសម្គាល់ ទៅតារាង:
ឧទាហរណ៍
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
ឥឡូវអ្នកអាចកំណត់រចនាប័ទ្មពិសេសសម្រាប់តារាងនេះ:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
width: 100%;
background-color: #f1f1c1;
}
បន្ថែមរចនាប័ទ្មបន្ថែមទៀត:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}