לימוד HTML חלק 26: שימוש בתכונות יישור וערך בטבלאות 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>

לאחר ביצוע הקוד לעיל בדפדפן הוא יופיע כמוצג להלן: