המדריך נכתב במקור על ידי עצמי, ופורסם לראשונה בפורום מתחרה. כל הזכויות שמורות. אין זכות להעתיק ללא רשות הכותב.
---------------------------------------------------------------------------------
מדריך זה מלמד על יצירת טבלאות בHTML. המדריך כולל את הסעיפים הבאים: מבנה הטבלה בHTML, מאפייני הטבלה,
יצירת טבלה פשוטה, התגית <tr> ומאפייניה, התגיד <td> ומאפייניה, ולסיום: תרגיל יצירת טבלה מורכבת.
מבנה הטבלה
להלן המבנה ליצירת טבלה:
קוד:
<table> <!-- תגית פתיחת הטבלה -->
<tr> <!-- הגדרת שורה בטבלה -->
<td> <!-- הגדרת תא בשורה -->
... <!-- תוכן התא -->
</td> <!-- סיום התא בשורה -->
</tr> <!-- סיום השורה בטבלה -->
</table> <!-- תגית סיום הטבלה -->
הסבר: זהו מבנה בסיסי של טבלה, כפי שניתן לראות כל טבלה מורכבת מ3 תגיות: <table> שמטרתה לסמן על תחילת וסיום הטבלה,
<tr> שמטרתה להגדיר שורה בתוך הטבלה ו<td> שמטרתה להגדיר תא בתוך השורה. טבלה יכולה לספק אין סוף תאים, כך שאין ספק
שטבלה יכולה גם להיות מאד מורכבת. הטבלה הנ"ל מגדירה רק שורה בודדה ותא בודד, לכן התוצאה של הטבלה הוא תא אחד.
בהמשך נלמד איך ליצור טבלאות ארוכות, מורכבות, ומבלבלות הרבה יותר. בהצלחה!
מאפייני הטבלה
כדי ליצור עניין בטבלאותך, תצטרך להגיד לטבלאותך מאפיינים. מאפייני טבלה יכלים להיות גובה הטבלה, אורכה, וכו'...
לטבלה יש מספר מאפיינים המוסברים בסעיף זה, כדי להוסיף מאפיין עליך לנהוג באופן הבא:
קוד:
<table NameOfPropertie="Value">
בעוד ש-NameOfPropertie הוא שם המאפיין, וValue הוא הוא ערך המאפיין.
הרשימה הבאה מפרטת על כל אחד ממאפייני הטבלה:- 1)width - רוחב בטבלה, המידות למאפיין זה נקבעות בפיקסלים או באחוזים. (פיקסלים - נקודות זעירות, אחוזים - רוחב יחסי ממסך המשתמש)
- 2)height - גובה הטבלה, המידות למאפיין זה נקבעות בפיקסלים בלבד.
- 3)border - עובי מסגרת הטבלה, נקבע במספרים מ0 ומעלה, בעוד ש0 היא טבלה ללא מסגרת.
- 4)bordercolor - צבע המסגרת, נמדד בערכים הקסדצימליים (על בסיס 16) של צבעים.
- 5)cellspacing - הרווח האנכי בין תאי הטבלה.
- 6)cellpadding - הרווח האופקי בין תאי הטבלה.
יצירת טבלה פשוטה
בסעיף זה תיצור טבלה פשוטה. בעצם, תיצור טבלה שתשמש כחודש אוקטובר בלוח שנה. אם אתה חושב שלא תבין דבר, אל תאגה - הכל יתברר.
זהו הקוד היוצר את הטבלה:
קוד:
<html dir="rtl">
<head>
<title>יצירת טבלה פשוטה</title>
</head>
<body bgcolor="FFFFFF">
<table border="1" width="100%">
<tr>
<td align="center"><p>יום ראשון</p></td>
<td align="center"><p>יום שני</p></td>
<td align="center"><p>יום שלישי</p></td>
<td align="center"><p>יום רביעי</p></td>
<td align="center"><p>יום חמישי</p></td>
<td align="center"><p>יום שישי</p></td>
<td align="center"><p>יום שבת</p></td>
<tr>
<td><p>1</p></td>
<td><p>2</p></td>
<td><p>3</p></td>
<td><p>4</p></td>
<td><p>5</p></td>
<td><p>6</p></td>
<td bgcolor="#999999"><p>7</p></td>
</tr>
<tr>
<td><p>8</p></td>
<td><p>9</p></td>
<td><p>10</p></td>
<td><p>11</p></td>
<td><p>12</p></td>
<td><p>13</p></td>
<td bgcolor="#999999"><p>14</p></td>
</tr>
<tr>
<td><p>15</p></td>
<td><p>16</p></td>
<td><p>17</p></td>
<td><p>18</p></td>
<td><p>19</p></td>
<td><p>20</p></td>
<td bgcolor="#999999"><p>21</p></td>
</tr></p></td>
</tr>
<tr>
<td><p>22</p></td>
<td><p>23</p></td>
<td><p>24</p></td>
<td><p>25</p></td>
<td><p>26</p></td>
<td><p>27</p></td>
<td bgcolor="#999999"><p>28</p></td>
</tr>
<tr>
<td><p>29</p></td>
<td><p>30</p></td>
<td><p>31</p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
</table>
</body>
</html>
הסבר הקוד: בקוד מוגדרת טבלה התופסת את כל רוחב הדף, ובעלת מסגרת בעובי 1. בשורה הראשונה מוגדרים שבעת ימי השבוע, ע"פ סדרם.
בחמשת השורות הבאות מוגדרות 5 שורות. כל תא בשורות אלו הוא בעצם יום בחודש. כפי שניתן לראות, לתאי השבתות יש מאפיין מיוחד:
bgcolor="#999999". הדבר גורם לרקע התא להפוך לאפור, ובכך להדגיש את יום שבת בשבוע. תוכל לנסות להריץ את הקוד ולראות את התוצאה.
התגית <tr>
התגית <tr> שבטבלה מטרתה להגדיר שורה. בין התגית <tr> לתגית הסגירה שלה (</tr>), מוגדרים התאים שנמצאים באותה שורה.
אין אפשרות להגדיר תאים שלא בתוך שורה, כך שתגית זו היא תגית הכרחית.
כמו לטבלה עצמה, גם לתגית <tr> יש מאפיינים. להלן רשימת מפורטת של מאפייני התגית <tr>:- 1)width - רוחב השורה, המידות למאפיין זה נקבעות בפיקסלים או באחוזים.
- 2)height - גובה השורה, המידות למאפיין זה נקבעות בפיקסלים בלבד.
הערה: לא מומלץ להכריז על הגובה של השורה, אלא עדיף להכריז על גובה התאים הנמצאים בה. כמו כן רב הפעמים אין צורך להכריז
על רוחב השורה, מכיוון שהיא אוטומטית תופסת את רוחב הטבלה, וזה בד"כ רצוננו. בקיצור: בד"כ עדיף לא להשתמש במאפייני <tr>, אלא במאפייני תאים. מאפיינים אלו יוסברו בסעיף הבא.
התגית <td>
התגית <td> מגדירה תא בשורת הטבלה. למעשה הטבלה עצמה, מורכבת רק מתאים, כך שהגדרת טבלה ללא תאים היא סתמית לחלוטין.
לתאים יש מספר רב יחסית של מאפיינים. ע"י שילוב של מאפייני טבלה ומאפייני תא בטבלה, תוכל ליצור טבלה אסתטית ומושכת את העין.
אין אתה חייב להגדיר על מאפיינים כלשהם, אך אלו יכולים לתרום המון אם תדע להשתמש בהם בצורה הנכונה.
להלן רשימת המאפיינים של תא:- 1)width - רוחב התא בשורה. נמדד בפיקסלים ובאחוזים. לדוגמא תוכל להגדיר 2 תאים בשורה, ולאחד מהם לתת 20% מרוחב השורה ולשני 80%.
- 2)height - גובה התא, עדיף להשתמש במאפיין זה כמאפיין תא, ולא כמאפיין שורה.
- 3)bgcolor - צבע רקע לתא, יש להזין זאת בקוד הקסדצימלי של צבעים.
- 4)background - תמונת רקע לתא, ערך המאפיין הוא כתובת התמונה.
- 5)colspan - מספר הטורים שתופס התא, ברירת המחדל היא 1.
- 6)rowspan - מספר השורות שתופס התא, ברירת המחדל היא 1.
- 7)align - הצד של הטקסט בתא מבחינה אופקית: right - ימין, center - אמצע, left - שמאל.
- 8)valign - הצג של הטקסט בתא מבחינה אנכית: top - פסגת התא, middle - אמצע התא, bottom - תחתית התא.
תרגיל סיכום
עכשיו, כשאתה מכיר את מאפייני הטבלה ומאפייני התא, ויודע למה משתמשת כל תגית בטבלה, נלמד איך ליצור טבלה מורכבת.
רק להמחשה, תוצאתה הסופית של הטבלה צריכה להיות כזאת:
[IMG]www.planetnana.co.il/talstuff/aTable.jpg[/IMG]
להלן הקוד שיוצר את הטבלה:
קוד:
<html dir="rtl">
<head>
<title>TableTest</title>
</head>
<body>
1)<table width="400" border="1" cellspacing="0" cellpadding="0" height="300">
<tr>
2)<td width="20%" rowspan="3" bgcolor="FFFF00"></td>
3)<td width="80%" colspan="3" bgcolor="FF00FF" align="left" valign="top">
<p>Created By Talika_G on ****.net</p></td>
</tr>
<tr>
4)<td width="40%" rowspan="2" bgcolor="FF0000" align="right" valign="bottom">
<p>AnotherTextHere</p></td>
5)<td width="20%" rowspan="3" bgcolor="00FF00" valign="middle" align="center">
<p>Text</p></td>
6)<td width="20%" bgcolor="00FFFF"></td>
</tr>
<tr>
7)<td width="20%" rowspan="2" bgcolor="000000"></td>
</tr>
<tr>
8)<td height="60%" colspan="2" bgcolor="0000FF"></td>
</tr>
9)</table>
</body>
</html>
הסבר: כדי שלא יווצר בלאגן, נסביר את הקוד שורה אחרי שורה ברשימה:- 1 )השורה מגדירה טבלה עם עובי מסגרת 1, ללא רווחים בין התאים, בגובה 300 פיקסלים וברוחב 400 פיקסלים
- 2 )השורה מגדירה תא בשורה הראשונה של הטבלה. תא זה הוא בעל רקע צהוב, הוא תופס 3 שורות, ורוחבו הוא 20% מרוחב הטבלה.
- 3 )השורה מגדירה תא נוסף בשורה ה-1. תא זה צבוע ברקע בצבע סגול. הוא ברוחב 80%, תופס 3 טורים, ובחלקו השמאלי למעלה כתוב הטקסט: Created By Talika_G on ****.net.
- 4 )השורה מגדירה תא בשורה ה-2. צבע הרקע של תא זה הוא אדום, הוא תופס 40% מרוחב הטבלה, ו2 שורות. בחלקו הימני למעתה יהיה כתוב הטקסט: AnotherTextHere.
- 5 )באותה השורה, מוגדר תא נוסף בצבצע ירוק. התא תופס 3 שורות ורוחבו הוא 20% מרוחב הטבלה. בחלקו האמצעי של התא יהיה כתוב הטקסט: Text.
- 6 )זהו תא בצבע תכלת באותה שורה. התא תופס 20% מרוחב הטבלה.
- 7 )בשורה ה-3, מוגדר תא חדש, צבעו הוא שחור והוא תופס 20% מרוחב הטבלה. כמו כן התא תופס 2 שורות.
- 8 )זהו התא האחרון בטבלה. התא תופס 2 טורים, והוא תופס 60% מרוחב הטבלה. צבע הרקע של תא זה הוא כחול.
תוכל לבדוק ולגלות, שהסכום של תאים בכל שורה הוא 100%. אם למשל מוגדר תא שתופס 2 שורות ורוחבו 20%, התא נחשב כ20% הן
בשורה הראשונה והן בשורה השנייה. אם לא הבנת את הקוד, נסה להסתכל על התמונה הנ"ל ולבדוק כל תא ותא.
[מדריך][HTML]טבלאות ב-HTML
