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

אבל למה?

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

הטבלה עצמה - מבנה

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

<table>
	<tr>
		<td> </td>
		<td> </td>
		<td> </td>
	</tr>
	<tr>
		<td> </td>
		<td> </td>
		<td> </td>
	</tr>
</table>

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

• caption- כותרת
• thead- האזור הלוגי המייצג את ראש הטבלה
• th- תא בראש עמודה
• tbody- האזור הלוגי המייצג את גוף הטבלה
• tfoot- האזור הלוגי המייצג את תחתית הטבלה
• col/colgroup- עטיפה לוגית לעמודה או למספר עמודות

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

אוקיי, אז מה המינימום האולימפי?

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

<table>
	<caption>My Table</caption>
	<tr>
		<th> </th>
		<th> </th>
		<th> </th>
	</tr>
	<tr>
		<td> </td>
...

caption- כותרת לטבלה
th- מקביל לתא רגיל (TD), אך מציין תא שנמצא בראש עמודה.

סטייל

בואי נייפה אותך קצת ממי.
אני מוסיף לטבלה class ע”מ שאוכל להחיל עליה את העיצוב שנמצא ב-CSS, וגם ע”מ למצוא אותה על הדף (תבינו אח”כ). במקרה זה- dataTable:

<table class="dataTable">
...

והסטייל עצמו:

.dataTable {
	border-collapse: collapse;
	text-align: left;
}
.dataTable td, .dataTable th {
	border: solid 1px #f1f1f1;
	padding: 3px;
}
.dataTable th {
	background: #A0C6E5;
	color: #fff;
	font-weight: normal;
	cursor: pointer;
}

או! כמה שאת יפה ממי! רוצה מנבו?

WTF?! איפה הפאקן זברה?!

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

function goZebra() {
    var pageTables = document.getElementsByTagName('TABLE');
    for (var i=0;i<pageTables.length;i++) {
        if (pageTables[i].className == 'dataTable') {
            var dtRow = pageTables[i].getElementsByTagName('TR');
            for (var x=1;x<dtRow.length;x++) {
                if (x%2 == 0) {
                    dtRow[x].className = 'even';
                }
            }
        }
    }
}

ונוסיף גם סטייל לשורות הזוגיות:

.even {
	background: #f1f1f1;
}

סיכום

בקצרה- הסקריפט עובר על הדף ומחפש את האובייקטים שהקלאס שלהם הוא dataTable. לאחר מכן הוא עובר השורות וצובע את הזוגיות מבינהן.
חדי העין מבינכם ישימו לב, שהלולאה פוסחת על השורה הראשונה (x=1), וזאת ע”מ ששורת התאים שבראש העמודות לא תיכלל בה.

התוצאה הסופית, תהנו.

הערות לסדר

ניתן להשתמש בפונקצייה זו גם לפספוס רשימות (UL), פשוט להחליף את ה-TABLE ב-UL ואת ה-TR ב-LI, לצורך הדוגמה.