עזרה:טבלאות/מדריך

מדריך לבניית טבלה מסוג מתקדם

ניקח לדוגמה את הטבלה של צאצאי נח, שם הצאצאים מסודרים לפי סדר הדורות כשכל אחד מהצאצאים מתפצל לילדיו:

תולדות נח
שם				חם					יפת
ארפכשד		עילם, אשור, לוד	ארם	כוש		מצרים	פוט	כנען	גומר	מגוג, מדי, תובל, משך, תירס	יוון
שלח			עוץ, חול, גתר, מש	סבא, חוילה, סבתא, סבכתא, נמרוד	רעמה	לודים, ענמים, להבים, נפתוחים, פתרוסים, כסלוחים, פלשתים, כפתורים		צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, סיני, ארודי, צמרי, חמתי	אשכנז, ריפת, תגרמה		אלישה, תרשיש, כיתים, דודנים
עבר					שבא, דדן
פלג	יקטן

הערה:כיוון ששפת התכנות של ווקימדיה מתוכננת לעבוד עם אנגלית לדעתי יקל באופן משמעותי לבנות את הטבלאות אם ניישר את כל הקוד לשמאל (כוונתי בעזרת Ctrl+Shift).

כדי לתרגם טבלה לשפה של ויקימדיה צריך להבין, שכאן אין אפשרות לערוך גרפית את הטבלה, כמו בכל מעבד תמלילים אחר, אלא רק על פי מספרים, לכן צריך לתכנן את הטבלה כיצד היא נראית ואז לשבץ את המספרים כמו שצריך. (אני דבר ראשון ערכתי לעצמי את הטבלה מראש ב-Word (אפשר בכל צורה אחרת כולל ידנית) וקיבלתי את הטבלה למעלה מוכנה ויזואלית). אחר כך כותבים שלד של הטבלה:

{|
|-
|
|}

כעת רושמים את הערכים של הטבלה בלי הגדרות, רק לפי הסדר שיש כבר בטבלה המוכנה, בין כל עמודה ועמודה מפרידים בעזרת שניים כאלה ||, ובין כל שורה ושורה בעזרת כזה |- לסמן התחלת שורה חדשה לאחר מכן יורדים שורה ומיד בתחילת השורה מכניסים את התו הזה | לסימון תחילת הגדרת העמודות בשורה (אין צורך לשים || לא לפני האיבר הראשון ולא אחרי האיבר האחרון בכל עמודה ועמודה, ולא -| לפני השורה הראשונה ולא אחרי השורה האחרונה - רק ביניהם, לעומת התו הזה | שצריך לבוא בתחילת כל שורה כדי להגדיר את העמודות של השורה), כדי ליצור שורה של כותרות (מודגש וממורכז) ניתן להשתמש בתו ! במקום בתו |, (למשל ניישם את זה בשורה הראשונה והשנייה):

{|
!תולדות נח
|-
!שם||חם||יפת
|-
|ארפכשד ||עילם, אשור, לוד||ארם||כוש||מצרים||פוט||כנען ||גומר||מגוג, מדי, תובל, משך, 
תירס||יוון
|-
||שלח||עוץ, חול, גתר, מש||סבא, חוילה, סבתא, סבכתא, נמרוד||רעמה||לודים, ענמים, להבים, 
נפתוחים, פתרוסים, כסלוחים, פלשתים, כפתורים||צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, 
סיני, ארודי, צמרי, חמתי||אשכנז, ריפת, תגרמה||אלישה, תרשיש, כיתים, דודנים
|-
|עבר||שבא, דדן
|-
| פלג || יקטן 
|-
|[1]||[2]
|}

הטבלה הזו נראית כך:

תולדות נח
שם	חם	יפת
ארפכשד	עילם, אשור, לוד	ארם	כוש	מצרים	פוט	כנען	גומר	מגוג, מדי, תובל, משך, תירס	יוון
שלח	עוץ, חול, גתר, מש	סבא, חוילה, סבתא, סבכתא, נמרוד	רעמה	לודים, ענמים, להבים, נפתוחים, פתרוסים, כסלוחים, פלשתים, כפתורים	צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, סיני, ארודי, צמרי, חמתי	אשכנז, ריפת, תגרמה	אלישה, תרשיש, כיתים, דודנים
עבר	שבא, דדן
פלג	יקטן
[1]	[2]

---

טוב, זו לא ממש טבלה כי אין לה גבולות, את זה נוסיף בעזרת הקוד border=1, אני הייתי מעוניין בקו דק בין כל עמודה ושורה לכן השתמשתי בספרה אחד. אפשר גם לכתוב 5 (לקווים עבים במיוחד). בהזדמנות זו נוסיף להגדרות הטבלה את הקוד align=center, על מנת שהטבלה כולה תוצג במרכז הדף (left ו-right כמובן בשביל שמאל וימין), וגם כדי שהקריאה תהיה נוחה נוסיף את הקוד "cellpadding="5 כדי שיהיה רווח בין הטקסט לגבולות התא.

כל הקודים האלה שמשפיעים על כל הטבלה צריך להוסיף מיד אחרי התווים שפותחים את הטבלה ( |} ) כשבין כל אחד ואחד מפריד רווח והקוד יהיה כך:

{| border=1 align=center cellpadding="5"
!תולדות נח
|-
!שם||חם||יפת
|-
|ארפכשד ||עילם, אשור, לוד||ארם||כוש||מצרים||פוט||כנען ||גומר||מגוג, מדי,
 תובל, משך, תירס||יוון
|-
||שלח||עוץ, חול, גתר, מש||סבא, חוילה, סבתא, סבכתא, נמרוד||רעמה||לודים, ענמים, להבים, 
נפתוחים, פתרוסים, כסלוחים, פלשתים, כפתורים||צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, 
סיני, ארודי, צמרי, חמתי||אשכנז, ריפת, תגרמה||אלישה, תרשיש, כיתים, דודנים
|-
|עבר||שבא, דדן
|-
| פלג || יקטן 
|-
|[1]||[2]
|}

הטבלה הזו כבר נראית כך:

תולדות נח
שם	חם	יפת
ארפכשד	עילם, אשור, לוד	ארם	כוש	מצרים	פוט	כנען	גומר	מגוג, מדי, תובל, משך, תירס	יוון
שלח	עוץ, חול, גתר, מש	סבא, חוילה, סבתא, סבכתא, נמרוד	רעמה	לודים, ענמים, להבים, נפתוחים, פתרוסים, כסלוחים, פלשתים, כפתורים	צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, סיני, ארודי, צמרי, חמתי	אשכנז, ריפת, תגרמה	אלישה, תרשיש, כיתים, דודנים
עבר	שבא, דדן
פלג	יקטן
[1]	[2]

עכשיו שלד הטבלה כבר מוכן, צריך רק לסדר את התאים לפי גודלם, שיתאימו לתכלית הטבלה (סדר הדורות) לכן, בַּ‏‏‏טבלה ששורטטה בנפרד סופרים בכמה עמודות וכמה שורות אני צריך להשתמש, ההתייחסות היא למספר העמודות והשורות הגבוה ביותר בטבלה, כי כל המספרים שאני הולך לכתוב למידות התא הם בעצם מספר של תאים שתופס התא, כשהתא הכי קטן הוא אחד, ושאר התאים מתייחסים אליו.
בטבלה של 'תולדות נח' מספר השורות המרבי הוא 7 ומספר העמודות המרבי הוא 12 (בשורה של הספרה [1] זו השורה עם הכי הרבה עמודות וגם (במקרה) זו העמודה עם הכי הרבה שורות).

בקוד משתמשים ב-colspan וב-rowspan כדי להגדיר את גודל התא לכן צריך לעבור על הקוד ולהכניס שם ערכים שיתאימו לכל גודל של תא, קל להבחין למשל ש'שם' כונס תחתיו 4 עמודות 'חם' 5 ו'יפת' גם כונס 4. הכותרת 'תולדות נח' למשל מכילה את כל הטבלה וכונסת תחתיה 12 עמודות, לעומת זאת אף אחד מן התאים שלעיל לא תופס יותר משורה אחת, בשונה מ'פוט' שתופס 5 שורות, לכן נציב לפני כל אחד מהתאים את הקוד "rowspan="5 למשל עבור תא בגודל 5 שורות ו "colspan"=5 עבור תא בגודל 5 עמודות. את הקודים האלו שמשפעים רק על תא, יש לכתוב בתוך כל תא כשבינו לבין המחרוזת של תוכן התא מפריד התו |, ובין כל קוד אם רוצים את שניהם (בטבלה הנוכחית אין את שניהם) מפריד רווח, הקוד של הטבלה כעת יהיה:

{|border=1 align=center cellpadding="5"
!colspan="12" |תולדות נח
|-
!colspan="4"|שם||colspan="5"|חם||colspan="3"|יפת
|-
|colspan="2"|ארפכשד ||rowspan="5"|עילם, אשור, לוד||ארם||colspan="2"|כוש||מצרים||
rowspan="5"| פוט ||כנען ||גומר||rowspan="5"|מגוג, מדי, תובל, משך, תירס||יוון
|-
|colspan="2"|שלח||rowspan="4"|עוץ, חול, גתר, מש||rowspan="4"|סבא, חוילה, סבתא, 
סבכתא, נמרוד||רעמה||rowspan="4"|לודים, ענמים, להבים, נפתוחים, פתרוסים, כסלוחים, 
פלשתים, כפתורים||rowspan="4"|צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, סיני, ארודי, 
צמרי, חמתי||rowspan="4"|אשכנז, ריפת, תגרמה||rowspan="4"|אלישה, תרשיש, כיתים, דודנים
|-
|colspan="2"|עבר||rowspan="3"|שבא, דדן
|-
| פלג || יקטן 
|-
|[1]||[2]
|}

הטבלה שנוצרה:

תולדות נח
שם				חם					יפת
ארפכשד		עילם, אשור, לוד	ארם	כוש		מצרים	פוט	כנען	גומר	מגוג, מדי, תובל, משך, תירס	יוון
שלח			עוץ, חול, גתר, מש	סבא, חוילה, סבתא, סבכתא, נמרוד	רעמה	לודים, ענמים, להבים, נפתוחים, פתרוסים, כסלוחים, פלשתים, כפתורים		צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, סיני, ארודי, צמרי, חמתי	אשכנז, ריפת, תגרמה		אלישה, תרשיש, כיתים, דודנים
עבר					שבא, דדן
פלג	יקטן
[1]	[2]

עכשיו הטבלה נראית הרבה יותר טוב, נשאר רק להשקיע בגימור הסופי שלה, בטבלה של 'תולדות נח' אני רציתי שהכיתוב יהיה עליון וממורכז, לכן השתמשתי בקודים הללו "align="center ו-"valign="top כש-align משמש כקוד יישור אופקי ו-valign משמש כקוד יישור אנכי, כמו כן רציתי להוסיף צבע רקע (אפור) לכותרת העליונה לכן השתמשתי ב-"bgcolor="#EAEAEA (קוד זה מסמל בקוד הצבעים האקסדצימלי את הצבע האפור,כאן יש רשימה מפורטת יותר). הערכים של יישור הטקסט בטבלה זו צריכים להשפיע על כל השורה, לכן רושמים אותם לאחר התווים של תחילת השורה ( -| ) כשבין כל קוד מפריד רווח, לעומת זאת את הקוד של צבע הרקע שממלא את התא של השורה העליונה צריך לרשום במתכונת תאים יחד עם הגדרת גודל התא:

{|border=1 align=center cellpadding="5"
!bgcolor="#EAEAEA" colspan="12" |תולדות נח
|-
!colspan="4"|שם||colspan="5"|חם||colspan="3"|יפת
|-align="center" valign="top"
|colspan="2"|ארפכשד ||rowspan="5"|עילם, אשור, לוד||ארם||colspan="2"|כוש||מצרים||
rowspan="5"| פוט ||כנען ||גומר||rowspan="5"|מגוג, מדי, תובל, משך, תירס||יוון
|-align="center" valign="top"
|colspan="2"|שלח||rowspan="4"|עוץ, חול, גתר, מש||rowspan="4"|סבא, חוילה, סבתא, 
סבכתא, נמרוד||רעמה||rowspan="4"|לודים, ענמים, להבים, נפתוחים, פתרוסים, כסלוחים, 
פלשתים, כפתורים||rowspan="4"|צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, סיני, 
ארודי, צמרי, חמתי||rowspan="4"|אשכנז, ריפת, תגרמה||rowspan="4"|אלישה, תרשיש, 
כיתים, דודנים
|-align="center" valign="top"
|colspan="2"|עבר||rowspan="3"|שבא, דדן
|-align="center" valign="top"
| פלג || יקטן 
|-align="center"
|<ref>מכאן ממשיכים עוד חמישה דורות מתוך עשרה שמנח עד אברהם: [[רעו]], [[שרוג]], 
[[נחור]], [[תרח]], [[אברהם]].</ref>||<ref>בניו של יקטן: אלמודד, שלף, חצרמות, 
ירח, הדורם, אוזל, דקלה, עובל, אבימאל, שבא, אופר, חוילה, יובב.</ref>
|}

והרי הטבלה:

תולדות נח
שם				חם					יפת
ארפכשד		עילם, אשור, לוד	ארם	כוש		מצרים	פוט	כנען	גומר	מגוג, מדי, תובל, משך, תירס	יוון
שלח			עוץ, חול, גתר, מש	סבא, חוילה, סבתא, סבכתא, נמרוד	רעמה	לודים, ענמים, להבים, נפתוחים, פתרוסים, כסלוחים, פלשתים, כפתורים		צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, סיני, ארודי, צמרי, חמתי	אשכנז, ריפת, תגרמה		אלישה, תרשיש, כיתים, דודנים
עבר					שבא, דדן
פלג	יקטן

כעת הטבלה כבר ממש מושלמת, אפשר לשים לב בקוד הנוכחי שניתן להציב כתוכן בתאי הטבלה את כל הקודים של ויקימדיה כמו במקרה כאן הקוד של הערת שוליים והקישורים הפנימיים.

---

בקוד של ויקי מדיה ניתן גם להשתמש בקודים style class ו-id כדי להגדיר תכונות סגנון מיוחד לטבלה. בטבלה המקורית לא נעשה שימוש בזה אך אפשר למשל שהטבלה תראה כך:

תולדות נח
שם				חם					יפת
ארפכשד		עילם, אשור, לוד	ארם	כוש		מצרים	פוט	כנען	גומר	מגוג, מדי, תובל, משך, תירס	יוון
שלח			עוץ, חול, גתר, מש	סבא, חוילה, סבתא, סבכתא, נמרוד	רעמה	לודים, ענמים, להבים, נפתוחים, פתרוסים, כסלוחים, פלשתים, כפתורים		צידון, חת, יבוסי, אמורי, גרגשי, חוי, ערקי, סיני, ארודי, צמרי, חמתי	אשכנז, ריפת, תגרמה		אלישה, תרשיש, כיתים, דודנים
עבר					שבא, דדן
פלג	יקטן

כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים, כאן אפשר למעשה לכתוב מה שרוצים.

תכונות הסגנון שהוספתי כאן הם גובה ואורך קבועים של הטבלה, קו מקוקו כחול ועבה וציפת הטקסט מימין לטבלה. כדי שהטבלה תראה כך נוסיף את הקוד הבא לתחילת הטבלה:

{|border=1 align=center cellpadding="5" style="width:50%; height: 50%; border: 3px
dashed blue; float: right;"
-
-
-
|}

הקוד צריך ליהיות בנוי כשהמילה ""=style פותחת את הקוד ובין המרכאות נמצאים ההגדרות עצמן כשכל הגדרה מוגדרת על ידי מילה לאחריה נקודתים ( : ), אחריהם הערך המגדיר ואחריו נקודפסיק ( ; ). אחרי ההגדרה האחרונה לא צריך לשים נקודה פסיק. בין כל הגדרה כזו מופיע רווח.

ניתן להשתמש גם בהגדרות class ו-id שהם סגנונות המוגדרים כבר בוויקפדיה מראש, הקוד יכתב כמו כל אחת מהגדרות הטבלה.

דוגמה לערך של הגדרת class:

"class="wikitable

זה יוצר את הטבלאות הקלאסיות של ויקימסע כמו הטבלאות המובאות כאן למטה.

• הקודים לעיצוב הטבלה מופיעים בטבלה הזו עזרה:טבלאות#פרמטרים, כשבצד שמאל מופיעה האפשרות היכן הקוד צריך להופיע.
• הקודים לסגנונות מופיעים בטבלה הזו עזרה:שכבות#מאפיינים.