שיעור 10: טבלאות

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

האם זה קשה?

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

דוגמה 1:

	
	<table>
	  <tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
	  </tr>
	  <tr>
		<td>Cell 3</td>
		<td>Cell 4</td>
	  </tr>
	</table>

בדפדפן זה יראה כך:

Cell 1 Cell 2
Cell 3 Cell 4

מה ההבדל בין <tr> ו- <td>?

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

3 אלמנטים שונים משמשים ליצירת טבלאות:

  • התג הפותח <table> והתג הסוגר <table/> מתחילים ומסיימים את הטבלה. הגיוני.
  • <tr> קיצור של "table row" מתחיל ומסיים שורות אופקיות. עדיין הגיוני.
  • <td> קיצור של "table data" תג זה מתחיל ומסיים כל תא בשורות של הטבלה שלך. הכל פשוט והגיוני.

וזה מה שקורה בדוגמה 1: הטבלה מתחילה עם <table>, ממשיכה עם <tr>, שמציין את תחילתה של שורה חדשה. שני תאים מוכנסים בשורה זו: <td>Cell 1</td> ו- <td>Cell 2</td>. בהמשך השורה נסגרת עם <tr/> ושורה חדשה <tr> מתחילה מיד לאחריה. השורות החדשות מכילות גם כן שני תאים. הטבלה נסגרת עם <table/>.

רק כדי להבהיר: שורות הן תאים בקו אופקי ועמודות הן תאים בקו אנכי:

Cell 1 Cell 2
Cell 3 Cell 4

Cell 1 ו-Cell 2 יוצרים שורה. Cell 1 ו-Cell 3 יוצרים עמודה.

בדוגמה למעלה, בטבלה ישנן שתי שורות ושתי עמודות. בכל אופן, לטבלה יכולה להיות כמות בלתי מוגבלת של שורות ועמודות.

דוגמה 2:

	
	<table>
	  <tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
		<td>Cell 3</td>
		<td>Cell 4</td>
	  </tr>
	  <tr>
		<td>Cell 5</td>
		<td>Cell 6</td>
		<td>Cell 7</td>
		<td>Cell 8</td>
	  </tr>
	  <tr>
		<td>Cell 9</td>
		<td>Cell 10</td>
		<td>Cell 11</td>
		<td>Cell 12</td>
	  </tr>
	</table>

בדפדפן זה יראה כך:

Cell 1 Cell 2 Cell 3 Cell 4
Cell 5 Cell 6 Cell 7 Cell 8
Cell 9 Cell 10 Cell 11 Cell 12

האם ישנם מאפיינים כלשהם?

כמובן שישנם מאפיינים. למשל, המאפיין border שמשמש להגדרת עובי הגבול סביב לטבלה:

דוגמה 3:

	
	<table border="1">
	  <tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
	  </tr>
	  <tr>
		<td>Cell 3</td>
		<td>Cell 4</td>
	  </tr>
	</table>

בדפדפן זה יראה כך:

Cell 1 Cell 2
Cell 3 Cell 4

עובי הגבול מוגדר בפיקסלים (ראה שיעור 9)

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

דוגמה 4:

	
	<table border="1" width="30%">

דוגמה זו תוצג בדפדפן כטבלה ברוחב של 30% מרוחב המסך. נסה זאת.

עוד מאפיינים?

ישנם מאפיינים רבים לטבלה - הנה שניים נוספים:

  • align: מציין את היישור האופקי של התוכן בטבלה כולה, בשורה או בתא בודד. למשל לשמאל-left, למרכז-center או לימין-right.
  • valign: מציין את היישור האנכי של התוכן בתא. למשל לחלק העליון-top, למרכז-middle או לחלק התחתון-bottom.

דוגמה 5:

	
	<td align="right" valign="top">Cell 1</td>

מה אני יכול להכניס לטבלה שלי?

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

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

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

<< שיעור 9: תמונות

שיעור 11: עוד על טבלאות >>