Clock

Khmer Web

Gateway to web application
Styling Table
Edit

តារាង (table) គឺ​ជា​ element ដ៏​សំខាន់​បំផុត នៅ​ក្នុង​ការបង្ហាញ​ទិន្នន័យ​ផ្សេង​ៗ​នៅ​លើ​ទំព័រ HTML ។ ហើយ​ការបង្កើត​តារាង ទាមទារ​ចាំបាច់​អោយ​យើងប្រើប្រាស់​ភាសា HTML សំរាប់​បង្កើត​គ្រោង​ឆ្អឹង​នៃ​តារាង និង​ភាសា CSS ក្នុង​ការរចនា​តារាង​នេះ អោយ​ចេញ​ជា​រូបរាង​និង​មាន​លក្ខណៈ​ទៅ​តាម​អ្វី​ដែល​យើង​ចង់​បាន​។ ពិនិត្យ​កម្មវិធី​ខាង​ក្រោម​នេះ៖ 

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Styling Table</title>
    <style>
      table, th, td {
  		border: 1px solid black;
	  }
    </style>
  </head>
  
  <body>
	
Add a border to a table:


	<table>
  	  <tr>
    	<th>Firstname</th> <th>Lastname</th>
  	  </tr>
 	  <tr>
    	<td>Peter</td> <td>Griffin</td>
  	  </tr>
  	  <tr>
    	<td>Lois</td> <td>Griffin</td>
  	  </tr>
	</table>
  </body>
</html>

Add a border to a table:

FirstnameLastname
PeterGriffin
LoisGriffin

បន្ទាប់​មក​ទៀត បើ​សិន​ជា​យើង​ចង់​អោយ​តារាង​របស់​យើង​មាន​ខ្សែ​វ័ណ្ឌ​តែ​មួយ យើង​ត្រូវ​ផ្តល់​តំលៃ​អោយ​ទៅ property border-callapse ជា collapse ដោយ​ធ្វើ​ដូច​ខាង​ក្រោម​នេះ៖ 

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Styling Table</title>
    <style>
      table, th, td {
  		border: 1px solid black;
        border-collapse: collapse;
	  }
    </style>
  </head>
  
  <body>
	
Add a border to a table:


	<table>
  	  <tr>
    	<th>Firstname</th> <th>Lastname</th>
  	  </tr>
 	  <tr>
    	<td>Peter</td> <td>Griffin</td>
  	  </tr>
  	  <tr>
    	<td>Lois</td> <td>Griffin</td>
  	  </tr>
	</table>
  </body>
</html>

Add a border to a table:

Firstname Lastname
Peter Griffin
Lois Griffin

បន្ទាប់​មក​ទៀត យើង​អាច​កំណត់​ប្រវែង​ទទឹង​របស់​តារាង​ទាំងមូល និង​ប្រវែង​ទទឹង​របស​ក្រឡា​និមួយ​ៗ​បាន ដោយ​ធ្វើ​ដូច​ខាង​ក្រោម​នេះ៖ 

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Styling Table</title>
    <style>
      table, th, td {
  		border: 1px solid black;
        border-collapse: collapse;
	  }
       table {
        width: 100%;
      }
      th {
        width: 50%;
      }
    </style>
  </head>
  
  <body>
	
Add a border to a table:


	<table>
  	  <tr>
    	<th>Firstname</th> <th>Lastname</th>
  	  </tr>
 	  <tr>
    	<td>Peter</td> <td>Griffin</td>
  	  </tr>
  	  <tr>
    	<td>Lois</td> <td>Griffin</td>
  	  </tr>
	</table>
  </body>
</html>

Add a border to a table:

Firstname Lastname
Peter Griffin
Lois Griffin

បន្ទាប់​មក​ទៀត យើង​អាច​ដាក់​ពណ៌​អោយ​ក្បាល​តារាង​ និង​ធ្វើ​អោយ​មាន​គំលាត​ខាង​ក្នុង​ក្រឡា​និមួយ​ៗ​នៅ​ក្នុង​តារាង ដោយ​ធ្វើ​ដូច​ខាង​ក្រោម​នេះ៖ 

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Styling Table</title>
    <style>
      table, th, td {
  		border: 1px solid black;
        border-collapse: collapse;
	  }
       table {
        width: 100%;
      }
      th {
        width: 50%;
      }
      th, td {
  		padding: 8px;
	  }
	  th {
  		background-color: #4CAF50;
  		color: white;
	  }
      tr:nth-child(even) {background-color: #f2f2f2;}
    </style>
  </head>
  
  <body>
	
Add a border to a table:


	<table>
  	  <tr>
    	<th>Firstname</th> <th>Lastname</th>
  	  </tr>
 	  <tr>
    	<td>Peter</td> <td>Griffin</td>
  	  </tr>
  	  <tr>
    	<td>Lois</td> <td>Griffin</td>
  	  </tr>
	</table>
  </body>
</html>

Add a border to a table:

Firstname Lastname
Peter Griffin
Lois Griffin