កំណត់តារាង HTML

តារាង 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>

តារាង HTML - បន្ថែមស៊ុមមួយ

បើអ្នកមិនបញ្ជាក់ស៊ុមសម្រាប់តារាងវានឹងត្រូវបានបង្ហាញដោយគ្មានស៊ុម។

ស៊ុមត្រូវបានកំណត់ដោយប្រើលក្ខណសម្បត្តិ ស៊ុម CSS:

ឧទាហរណ៍

table, th, td {
    border: 1px solid black;

តារាង HTML - ព្រំដែនដែលបានបង្រួម

ប្រសិនបើអ្នកចង់ស៊ុមទម្លាក់ចូលទៅក្នុងស៊ុមមួយបញ្ចូលលក្ខណសម្បត្តិ ស៊ុម CSS -collapse :

ឧទាហរណ៍

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

តារាង HTML - បន្ថែមបន្ទះក្រឡា

ចន្លោះក្រឡាបញ្ជាក់ចន្លោះរវាងមាតិកាក្រឡានិងស៊ុមរបស់វា។

ប្រសិនបើអ្នកមិនបញ្ជាក់ចន្លោះមួយទេក្រឡាតារាងនឹងត្រូវបានបង្ហាញដោយគ្មានចន្លោះ។

ដើម្បីកំណត់គែមប្រើលក្ខណៈ CSS padding :

ឧទាហរណ៍

th, td {
    padding: 15px;
}

តារាង HTML - ក្បាលឆ្វេង - តម្រឹម

តាមលំនាំដើមក្បាលតារាងគឺដិតនិងកណ្តាល។

ដើម្បីតម្រឹមកថាខណ្ឌខាងឆ្វេង តម្រឹម លក្ខណសម្បត្តិ អត្ថបទ CSS:

ឧទាហរណ៍

th {
    text-align: left;
}

តារាង HTML - បន្ថែមគម្លាតស៊ុម

គម្លាតព្រំដែនបញ្ជាក់ចន្លោះរវាងកោសិកា។

ដើម្បីកំណត់គម្លាតស៊ុមសម្រាប់តារាងប្រើលក្ខណសម្បត្តិ បន្សំ CSS:

ឧទាហរណ៍

table {
    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>

តារាង 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>

តារាង 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>

រចនាប័ទ្មពិសេសសម្រាប់តារាងមួយ

ដើម្បីកំណត់រចនាប័ទ្មពិសេសសម្រាប់តារាងពិសេសបន្ថែមគុណលក្ខណៈ លេខសម្គាល់ ទៅតារាង:

ឧទាហរណ៍

<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>

ឥឡូវអ្នកអាចកំណត់រចនាប័ទ្មពិសេសសម្រាប់តារាងនេះ:

table#t01 {
    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;
}