تعلم HTML الجزء 26: استخدام سمات المحاذاة و Valign في جداول HTML

لقد ناقشنا المواد السابقة حول وظيفة سمات العرض والارتفاع في جدول HTML.

في هذه المناقشة ، سأناقشحول كيفية استخدام سمات المحاذاة والقيم في علامة <table>. يجب أن تعلم أيضًا أن استخدام هاتين السمتين مدعوم فقط بواسطة HTML4.01 ولكن لا يدعمه HTML5. لمزيد من التفاصيل حول السمتين ، دعنا نلقي نظرة على الشرح أدناه:

سمة محاذاة

يتم استخدام سمة المحاذاة في الجدول للتعيينشكل بيانات التسوية على الطاولة أفقياً. يمكن استخدام سمة المحاذاة في علامة <table> التي ستحدد موضع الجدول أو في علامة <tr> أو <th> أو <td> التي ستحدد موضع محتويات الجدول (البيانات) في الجدول أفقيًا.

في علامة <table> ، القيم التي يمكن تطبيقها على سمة المحاذاة هي:

غادر لجعل موقف الجدول إلى اليسار (افتراضي).
حق لجعل موقف الجدول على اليمين.
المركز لجعل موقف الجدول في الوسط.

فيما يلي مثال على رمز الكتابة واستخدام سمة المحاذاة في علامة <table>:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Align di HTML</title>
</head>
<body>
<table border="2" align="right">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td>2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td>3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>

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

بعد ذلك ، في سمة المحاذاة المستخدمة لضبط المحاذاة في جدول البيانات (<tr> أو <th> أو <td>) ، توجد أربع قيم ، وهي:

القيمة	الوظيفة
غادر	جعل محتويات الخلايا محاذاة إلى اليسار (افتراضي)
حق	اجعل محتويات الخلية مسطحة تمامًا
المركز	اجعل محتويات الخلايا متمركزة بشكل مسطح
تبرير	جعل محتويات الخلية بالارض اليسرى واليمنى

فيما يلي مثال على كتابة التعليمات البرمجية واستخدام سمة المحاذاة لتسوية بيانات الجدول:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Align di HTML</title>
</head>
<body>
<table border="2">
<tr>
<th>Nama Lengkap</th>
<th width="200">Nama</th>
<th>Hobi yang Paling Disukai</th>
</tr>
<tr>
<td align="center">Zakaria</td>
<td align="right">Zaka</td>
<td align="left">Futsal</td>
</tr>
</table>
</body>
</html>

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

السمة Valign

يتم استخدام سمة valign في الجدول من أجلترتيب المحاذاة على الطاولة عموديا. تتم كتابة سمة valign في علامات <tr> أو <th> أو <td> التي تحدد عموديًا موضع محتويات الجدول (البيانات) في الجدول. هناك أربع قيم يمكن تطبيقها على سمة valign ، وهي:

القيمة	الوظيفة
أعلى	جعل محتويات الخلية بالارض مع الخلايا
القاع	اجعل محتويات الخلايا مستوية بالتساوي مع الخلايا
الوسط	يجعل محتويات الخلية في منتصف الخلايا
خط الأساس	اجعل محتويات الخلية في موضع النص الأول المكتوب في الخلية

فيما يلي مثال على رمز الكتابة واستخدام سمة valign في HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Valign di HTML</title>
</head>
<body>
<table border="2" height="150">
<tr>
<th>No</th>
<th width="100">NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center" valign="baseline">1</td>
<td valign="top">071401001</td>
<td valign="top">Ridayanti</td>
</tr>
<tr>
<td align="center" valign="baseline">2</td>
<td valign="bottom">071401002</td>
<td valign="bottom">Ahmad Zulham</td>
</tr>
<tr>
<td align="center" valign="baseline">3</td>
<td valign="center">071401003</td>
<td valign="center">Zulaikha</td>
</tr>
</table>
</body>
</html>

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

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

</p>

اقرأ المزيد: