تعلم HTML الجزء 25: استخدام سمات العرض والارتفاع في جداول HTML
بالنسبة لأولئك منكم الذين قرأوا مادة تعلم HTML من قبل ، بالطبع فأنت على دراية بسمات العرض والارتفاع.
لا يقتصر تطبيق هاتين السمتين على جداول HTML فحسب ، بل يستخدم أيضًا لتعيين حجم المحتوى في HTML مثل الصور.
لأولئك منكم الذين لا يزالون لا يفهمون كيف يصنعونهجداول وسمات HTML شائعة الاستخدام في جداول HTML ، يمكنك إلقاء نظرة على المقالات السابقة لزيادة فهمك قبل المتابعة إلى هذه المقالة.
بشكل عام ، تطبيق سمات العرض والارتفاععلامة <table> مدعومة فقط بواسطة HTML4.01 ولكنها غير مدعومة بواسطة HTML5. ومع ذلك ، يجب أن تعرف أيضًا كيفية استخدام كلتا السمتين في علامة <table> كتعلم. الآن ، لمزيد من التفاصيل حول كيفية استخدام هاتين السمتين ، دعنا نلقي نظرة على الشرح أدناه.
سمة العرض
يتم استخدام سمة العرض في الجدول من أجلتحديد عرض الجدول. إذا لم تقم بتعيين عرض الجدول باستخدام سمة العرض ، فإن عرض الجدول سيطابق العرض المطلوب لعرض البيانات. بناء جملة سمة العرض هو:
<table width="pixel atau %">في سمة العرض ، هناك قيمتان يمكن تطبيقهما ، وهما:
| القيمة | الوظيفة |
| بكسل (بكسل) | تعيين العرض بالبكسل ، على سبيل المثال: 400 بكسل أو 400 فقط |
| النسبة المئوية (٪) | قم بتعيين العرض بالنسبة المئوية للعناصر المحيطة ، على سبيل المثال: 30٪ |
فيما يلي مثال على رمز الكتابة واستخدام سمة العرض في HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Width di HTML</title>
</head>
<body>
<table width="400" border="2">
<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>بعد تنفيذ الرمز أعلاه في المتصفح ، سيظهر كما هو موضح أدناه:
سمة الارتفاع
يتم استخدام سمة الارتفاع في الجدول من أجلتحديد ارتفاع الجدول. كما هو الحال مع سمة العرض ، إذا لم تقم بتعيين ارتفاع الجدول باستخدام سمة الارتفاع ، فسوف يتطابق ارتفاع الجدول مع الارتفاع المطلوب لعرض البيانات. بناء جملة سمة الارتفاع هو:
<table height="pixel atau %">في سمة الارتفاع ، هناك قيمتان يمكن تطبيقهما ، وهما:
| القيمة | الوظيفة |
| بكسل (بكسل) | تعيين العرض بالبكسل ، على سبيل المثال: 150 بكسل أو 150 فقط |
| النسبة المئوية (٪) | تعيين العرض بالنسبة المئوية للعناصر المحيطة ، على سبيل المثال: 10٪ |
فيما يلي مثال لكتابة التعليمات البرمجية واستخدام سمة الارتفاع في HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Height di HTML</title>
</head>
<body>
<table border="2" height="150">
<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>بعد تنفيذ الرمز أعلاه في المتصفح ، سيظهر كما هو موضح أدناه:
نظرًا لأن هاتين السمتين غير مدعومتين بواسطة HTML5 ، فمن المستحسن استخدام CSS في إعدادات عرض الجدول والارتفاع. بنية العرض والارتفاع في CSS هي:
<table style="width:400px; height:150px;">هذا كل مادة لاستخدام سمات العرض والارتفاع في الجداول بتنسيق HTML ، ونأمل أن تتمكن من فهم المادة المذكورة أعلاه جيدًا.
