תגיות table, tr, th, td וכתיבת טבלאות

יצירת טבלאות ב-HTML

טבלה מורכבת מ-4 חלקים:

1. Caption - כותרת
2. Table Head - הסכימה של הטבלה (ראש הטבלה)
3. Table Body - גוף הטבלה
4. Table Foot - החלק התחתי של הטבלה

בכל אחד מהחלקים ניתן ליצור שורות (Table Rows) ובכל שורה ניתן ליצור תאי מידע (Table Data Cells).

נראה טבלה סטנדרטית לדוגמה:

<table>
	<caption>
		Employees and their salaries
	</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Yoav</td>
			<td>$4200</td>
		</tr>
		<tr>
			<td>Vered</td>
			<td>$5600</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Total</td>
			<td>$9800</td>
		</tr>
	</tfoot>
</table>

טבלה זו מוצגת בדפדפן באופן הבא:

בדוגמה זו אנו יוצרים טבלת משכורות.

כותרת הטבלה (עטופה בתגית caption) היא Employees and their salaries.

הסכימה של הטבלה (עטופה בתגית thead) כוללת שורה אחת עם שני תאים: Name עבור השם, Salary עבור המשכורת.

הגוף של הטבלה (עטוף בתגית tbody) כולל שתי שורות, אחת עם המשכורת של Yoav והשניה עם המשכורת של Vered.

החלק התחתי של הטבלה (עטוף בתגית tfoot) כולל שורת סיכום עם סכום המשכורות.

כל שורה נכתבת באמצעות התגית tr. תאי המידע שנמצאים בתוך השורה נכתבים באמצעות התגית th או td.

השימוש ב-th נעשה כדי לסמן שאלו תאי כותרת. תאי th בדרך כלל יופיעו רק בשורת tr שנמצאת בסכימה של הטבלה (ב-thead), אבל לא בהכרח. יכולנו למשל להוסיף עמודה נוספת לטבלה שלנו שתופיעה ראשונה, ויהיה רשום בה בכל תא בעמודה את המילה Person, כך שזו כותרת שמציינת שהשורה מדברת על Person. במקרה כזה, היינו קובעים כל תא בעמודה שהוספנו כ-th ולא כ-td.

מיזוג תאים בטבלה ב-HTML

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

ניתן לעשות זאת באמצעות המאפיינים colspan ו-rowspan.

המאפיין colspan מגדיר את רוחב תא המידע בעמודות.

המאפיין rowspan מגדיר את רוחב תא המידע בשורות.

דוגמה:

<table>
	<caption>
		Employees and their salaries
	</caption>
	<thead>
		<tr>
			<th colspan="2">Salaries</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Yoav</td>
			<td>$4200</td>
		</tr>
		<tr>
			<td>Vered</td>
			<td>$5600</td>
		</tr>
		<tr>
			<td rowspan="2">Tamir</td>
			<td>$3800</td>
		</tr>
		<tr>
			<td>$1700</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Total</td>
			<td>$15300</td>
		</tr>
	</tfoot>
</table>

טבלה זו מוצגת בדפדפן באופן הבא:

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

כמו כן, יצרנו תא כפול בגובה (תופס 2 עמודות) עבור Tamir שיש לו 2 משכורות.

דגשים ליצירת טבלאות ב-HTML

טבלאות נועדו להציג מידע בצורה מסודרת. הן אינן נועדו לעמד ולעצב דפי אינטרנט. עיצוב דפי אינטרנט צריך להעשות באמצעות תגיות div ולא באמצעות טבלאות.

החלוקה ל-thead, tbody, tfoot אינה מחייבת. ניתן להכניס את כל שורות הטבלה (תגיות ה-tr) ישירות בתוך התגית table. עם זאת, אנו מאוד ממליצים כן לחלק את הטבלה ל-3, כיוון שכך אנו מקנים לטבלה סמנטיקה ברורה יותר ועוזרים להנגשת עמוד ה-HTML לאנשים עם מוגבלות ולקידום אורגני טוב יותר במנועי החיפוש.

גם השימוש בתגית th אינו חובה וניתן להשתמש בתגיות td בלבד, אם כי גם כאן נמליץ כן להשתמש בתגיות th עבור תאי המידע בסכימה של הטבלה.