កំណត់តារាង 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;
}

រូបភាព HTML

រូបភាពអាចកែលម្អការរចនានិងរូបរាងរបស់គេហទំព័រ។

ឧទាហរណ៍

<img src="pulpitrock.jpg" alt="Mountain View">

ឧទាហរណ៍

<img src="img_girl.jpg" alt="Girl in a jacket">

ឧទាហរណ៍

<img src="img_chania.jpg" alt="Flowers in Chania">

HTML រូបភាពវាក្យសម្ពន្ធ

ក្នុង HTML រូបភាពត្រូវបានកំណត់ដោយស្លាក <img> ។

ស្លាក <img> ទទេវាមានតែគុណលក្ខណៈនិងមិនមានស្លាកបិទ។

គុណលក្ខណៈ src បញ្ជាក់ URL (អាសយដ្ឋានគេហទំព័រ) របស់រូបភាព:

<img src=" url ">

គុណលក្ខណៈ alt

គុណលក្ខណៈ alt ផ្តល់អត្ថបទជំនួសសម្រាប់រូបភាពប្រសិនបើអ្នកប្រើមិនអាចរកមើលវា (ដោយសារការតភ្ជាប់យឺតកំហុសក្នុងគុណលក្ខណៈ src ឬប្រសិនបើអ្នកប្រើប្រើកម្មវិធីអានអេក្រង់) ។

តម្លៃរបស់គុណលក្ខណៈ alt គួរពណ៌នាអំពីរូបភាព:

ឧទាហរណ៍

<img src="img_chania.jpg" alt="Flowers in Chania">

ប្រសិនបើកម្មវិធីរុករកមិនអាចរកឃើញរូបភាពវានឹងបង្ហាញតម្លៃនៃគុណលក្ខណៈ alt:

ឧទាហរណ៍

<img src="wrongname.gif" alt="Flowers in Chania">

ទំហំរូបភាព - ទទឹងនិងកំពស់

អ្នកអាចប្រើគុណលក្ខណៈ រចនាប័ទ្ម ដើម្បីបញ្ជាក់ទទឹងនិងកម្ពស់របស់រូបភាព។

ឧទាហរណ៍

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

ជាជម្រើសអ្នកអាចប្រើគុណលក្ខណៈ ទទឹង និង កម្ពស់ :

ឧទាហរណ៍

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

គុណលក្ខណៈទទឹងនិងកំពស់តែងតែកំណត់ទទឹងនិងកម្ពស់របស់រូបភាពជាភីកសែល។

ទទឹងនិងកំពស់ឬស្ទីល?

ទាំងទំហំទទឹងនិងរចនាប័ទ្មមានសុពលភាពក្នុង HTML5 ។

ទោះជាយ៉ាងណាក៏ដោយយើងស្នើឱ្យប្រើគុណលក្ខណៈរចនាប័ទ្ម។ វាការពារសន្លឹករចនាប័ទ្មពីការផ្លាស់ប្តូរទំហំរូបភាព:

ឧទាហរណ៍

<!DOCTYPE html>
<html>
<head>
<style>
img { 
    width:100%; 
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>

រូបភាពក្នុងថតផ្សេងទៀត

ប្រសិនបើមិនបានបញ្ជាក់ទេកម្មវិធីរុករករំពឹងថានឹងស្វែងរករូបភាពនៅក្នុងថតដូចគ្នាជាមួយគេហទំព័រ។

ទោះជាយ៉ាងណាក៏ដោយជាទូទៅវាត្រូវរក្សាទុករូបភាពនៅក្នុងថតរង។ អ្នកត្រូវតែបញ្ចូលឈ្មោះថតក្នុង src attribute:

ឧទាហរណ៍

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

រូបភាពនៅលើម៉ាស៊ីនមេផ្សេងទៀត

គេហទំព័រខ្លះផ្ទុករូបភាពរបស់ពួកគេនៅលើម៉ាស៊ីនមេ។

តាមពិតអ្នកអាចចូលមើលរូបភាពពីអាសយដ្ឋានបណ្ដាញណាមួយក្នុងពិភពលោក:

ឧទាហរណ៍

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

រូបភាពមានចលនា

HTML អនុញ្ញាត GIF ដែលមានចលនា:

ឧទាហរណ៍

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

រូបភាពជាតំណ

ដើម្បីប្រើរូបភាពជាតំណសូមដាក់ស្លាក <img> នៅខាងក្នុងស្លាក <a>:

ឧទាហរណ៍

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

រូបភាពអណ្តែត

ប្រើលក្ខណសម្បត្តិ អថេរ CSS ដើម្បីឱ្យរូបភាពអណ្តែតទៅខាងស្តាំឬខាងឆ្វេងនៃអត្ថបទ:

ឧទាហរណ៍

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

ឧទាហរណ៍

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

គុណលក្ខណៈនៃស្លាកឈ្មោះ <ផែនទី> ត្រូវបានភ្ជាប់ជាមួយនឹងគុណលក្ខណៈសន្សំរបស់ <img> និងបង្កើតទំនាក់ទំនងរវាងរូបភាពនិងផែនទី។

ស្លាក <ផែនទី> មានចំនួននៃស្លាក <តំបន់> ដែលកំណត់តំបន់អាចចុចបាននៅក្នុងផែនទីរូបភាព។

រូបភាព​ផ្ទៃ​ខាង​ក្រោយ

ដើម្បីបន្ថែមរូបភាពផ្ទៃខាងក្រោយលើធាតុរបស់ HTML សូមប្រើ background-image លក្ខណសម្បត្តិ CSS:

ឧទាហរណ៍

ដើម្បីបន្ថែមរូបភាពផ្ទៃខាងក្រោយនៅលើទំព័រវ៉េបបញ្ជាក់លក្ខណសម្បត្តិរូបភាពផ្ទៃខាងក្រោយនៅលើធាតុ BODY:

<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>
</body>

ឧទាហរណ៍

ដើម្បីបន្ថែមរូបភាពផ្ទៃខាងក្រោយនៅលើកថាខណ្ឌបញ្ជាក់លក្ខណសម្បត្តិរូបភាពផ្ទៃខាងក្រោយនៅលើធាតុ P:

<body>

<p style="background-image:url('clouds.jpg')">
...
</p>

</body>

ដើម្បីស្វែងយល់បន្ថែមអំពីរូបភាពផ្ទៃខាងក្រោយសិក្សា វគ្គសិក្សាផ្ទៃខាងក្រោយ CSS របស់យើង។

HTML5 បានណែនាំធាតុ <picture> ដើម្បីបន្ថែមភាពបត់បែននៅពេលបញ្ជាក់ឯកសាររូបភាព។

ធាតុ <រូបភាព> មានចំនួនធាតុ <ប្រភព> នីមួយៗដែលសំដៅទៅលើប្រភពរូបភាពផ្សេងៗគ្នា។ វិធីនេះកម្មវិធីរុករកអាចជ្រើសរើសរូបភាពដែលសមបំផុតនឹងទិដ្ឋភាពបច្ចុប្បន្ននិង / ឬឧបករណ៍។

ធាតុ <ប្រភព> នីមួយៗមានគុណលក្ខណៈពិពណ៌នានៅពេលដែលរូបភាពរបស់ពួកគេគឺសមរម្យបំផុត។

កម្មវិធីរុករកនឹងប្រើប្រាស់ធាតុ <ប្រភព> ដំបូងជាមួយនឹងតម្លៃគុណលក្ខណៈដែលផ្គូផ្គងហើយមិនអើពើនឹងធាតុខាងក្រោមណាមួយ។

ឧទាហរណ៍

បង្ហាញរូបភាពមួយប្រសិនបើបង្អួចកម្មវិធីរុករក (ទិដ្ឋភាព) មានទំហំអប្បបរមា 650 ភីកសែលនិងរូបភាពផ្សេងទៀតប្រសិនបើមិនធំជាង 465 ភីកសែល។

<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">