تعلم HTML الجزء الرابع والعشرون: استخدام سمات Cellpadding و Cellspacing في HTML

شرحت في المقالة السابقةحول إنشاء الجداول في HTML. بالنسبة لأولئك منكم الذين قرأوا المقالة سابقًا ، بالطبع تعرف بالفعل كيفية إنشاء الجداول بتنسيق HTML مع العديد من العلامات التي تدعم استخدام الجداول في HTML.

وصف لكيفية استخدام علامات متعددةكما تم شرح سمات الجدول في HTML في المقالات السابقة. في هذه المناقشة ، سأقدم سمات أخرى تدعم أيضًا استخدام الجداول في HTML ، وهي سمات حشو الخلايا وتباعد الخلايا. فيما يلي شرح لسمات ألواح الخلايا وتباعد الخلايا:

الحشو الخلوي

يتم استخدام السمة cellpadding لتحديدالمسافة في خلية تقع بين جدار الخلية ومحتويات الخلية. لا يتم استخدام السمة الخلوية الخلوية إلا بواسطة HTML4.01 ولكن لا يدعمها HTML5. كتابة سمة لوحة HTML الخلوية هي:

<table cellpadding="pixel">

قيمة سمة لوحة الخلية في تحديد التباعد في خلية هي بكسل. نموذج التعليمات البرمجية التالي كتابة واستخدام ألواح الخلايا في HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cellpadding di HTML</title>
</head>
<body>
<table border="2" cellpadding="5">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>

بعد تنفيذ كود HTML أعلاه في المتصفح ، سيظهر كما هو موضح أدناه:

تباعد الخلايا

يتم استخدام السمة مسافة التباعد لتحديدالتباعد بين الخلايا. على غرار سمة لوحة المفاتيح الخلوية ، لا تدعم HTML5 سمة مسافة الخلية. فيما يلي مثال على كتابة سمة التباعد الخلوي في HTML:

قيمة السمة الخلوية في تحديد المسافة في الخلية هي بكسل. يقوم نموذج التعليمات البرمجية التالي بكتابة واستخدام المسافة الخلوية في HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cellspacing di HTML</title>
</head>
<body>
<table border="2" cellspacing="5">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>

بعد تنفيذ الرمز أعلاه في المتصفح ، سيظهر كما هو موضح أدناه:

يوضح الشرح أعلاه الفرق بين حشو الخلايا والمسافة بين الخلايا واستخدام هاتين السمتين ، لذلك لا داعي للارتباك بشأن الاختلافات بين الاثنين.

باختصار ، ينظم حشو الخلايا المسافة بينجدار الخلية (الإطار) ومحتويات الخلية أثناء التباعد ينظم المسافة بين خلية وخلية أخرى. فيما يلي مثال على التعليمات البرمجية لكتابة واستخدام سمات ألواح الخلايا وتباعد الخلايا في HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cellspacing dan Cellpadding di HTML</title>
</head>
<body>
<table border="2" cellspacing="5" cellpadding="5">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td align="center">3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>

بعد تنفيذ الرمز أعلاه في المتصفح ، سيظهر كما هو موضح أدناه: