וובמאסטר - תיכנות ובניית אתרים

מדריך HTML – תגיות נפוצות: טבלאות

גיא בורשטיין/‏ 16 פברואר, 2003
F+
F-

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

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

הגדרה בסיסית של טבלה

העתק את קוד ה- HTML הבא לעמוד HTML חדש:

<html>
<
head>
  <title>טבלאות</title
>
</
head
>
<
body>
  <table>
    <tr>
      <td>שורה 1, תא 1</td>
      <td>שורה 1, תא 2</td>
      <td>שורה 1, תא 3</td>
    </tr>
    <tr>
      <td>שורה 2, תא 1</td>
      <td>שורה 2, תא 2</td>
      <td>שורה 2, תא 3</td>
    </tr>
    <tr>
      <td>שורה 3, תא 1</td>
      <td>שורה 3, תא 2</td>
      <td>שורה 3, תא 3</td>
    </tr>
  </table
>
</
body
>
</
html
>

הרצה של דף זה בדפדפן תתן את התוצאה הבאה:

HTML טבלאות

הגדרת טבלה:

  • הגדרת הטבלה תעשה ע”י שימוש בתגית <table>, ובתוכה נגדיר את השורות והעמודות.
  • בתוך הגדרת הטבלה, נגדיר שורה שורה. כל שורה מוגדרת בין התגיות <tr> ל- <tr/>
  • עבור כל שורה, נתוני התאים מוגדרים בין התגיות <td> ל- <td/>.

עיצוב טבלאות

עיצוב טבלאות יעשה ע”י שימוש ב- CSS בלבד, אולם פעמים רבות בשלב בניית הדף, נרצה לראות את הטבלה בבירור. לשם כך נשתמש במאפיין border.

לדוגמא, עבור הטבלה הנ”ל נגדיר בהגדרת הטבלה את רוחב המסגרת להיות 1:

<table border="1">
...
</table
>

ואז אם נריץ את הדף, נקבל את התוצאה הבאה, שיותר קל להבין ממנה את מבנה הטבלה.

HTML טבלה

חשוב! לא לשכוח לבטל את הגדרת המסגרת ולעצב את הטבלה באמצעות CSS.

כותרות בטבלה

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

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

<table border="1">
  <tr>
    <th>כותרת 1</th>
    <th>כותרת 2</th>
    <th>כותרת 3</th>
  </tr>
  <tr>
    <td>שורה 1, תא 1</td>
    <td>שורה 1, תא 2</td>
    <td>שורה 1, תא 3</td>
  </tr>
  ...
</table
>

ונקבל את התוצאה:

HTML טבלה

אם נרצה להגדיר כותרות לשורות, נוסיף תא מסוג th לכל שורה:

<table border="1">
  <tr>
    <th>כותרת 1</th>
    <td>שורה 1, תא 1</td>
    <td>שורה 1, תא 2</td>
    <td>שורה 1, תא 3</td>
  </tr>
  <tr>
    <th>כותרת 2</th>
    <td>שורה 2, תא 1</td>
    <td>שורה 2, תא 2</td>
    <td>שורה 2, תא 3</td>
  </tr>
  <tr>
    <th>כותרת 3</th>
    <td>שורה 3, תא 1</td>
    <td>שורה 3, תא 2</td>
    <td>שורה 3, תא 3</td>
  </tr
>
</
table
>

ונקבל:

HTML טבלה

איחוד תאים או עמודות

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

  • כדי לאחד תאים באותה שורה, נוסיף את המאפיין colspan לתגית ה- td או ה- th ונגדיר כמה תאים לאחד.
  • כדי לאחר שורות, נשתמש במאפיין rowspan ונגדיר כמה שורות לאחד.

לדוגמא, הגדרת הטבלה הבאה:

<table border="1">
  <tr>
    <td></td>
    <th colspan="3">כותרת לעמודות</th>
  </tr>
  <tr>
    <th rowspan="3">כותרת לשורות</th>
    <td>שורה 1, תא 1</td>
    <td>שורה 1, תא 2</td>
    <td>שורה 1, תא 3</td>
  </tr>
  <tr>
    <td>שורה 2, תא 1</td>
    <td>שורה 2, תא 2</td>
    <td>שורה 2, תא 3</td>
  </tr>
  <tr>
    <td>שורה 3, תא 1</td>
    <td>שורה 3, תא 2</td>
    <td>שורה 3, תא 3</td>
  </tr
>
</
table
>

תביא לטבלה הבאה:

HTML טבלה

נשים לב:

  • בשורה הראשונה בטבלה, מוגדר תא ריק (תגיות td ללא תוכן) עבור התא בפינה השמאלית העליונה.
  • כותרת העמודות מוגדרת בשורה הראשונה ונפרשת על פני 3 עמודות (שימוש ב- colspan).
  • כותרת השורות מוגדרת בשורה השניה ונפרשת ע”פ 3 שורות (שימוש ב- rowspan).
  • בשורות הבאות לא מוגדר התא הראשון, כיוון שהוא תפוס ע”י הכותרת.

גיא בורשטיין

גיא בורשטיין הוא מומחה טכנולוגיות פיתוח בחברת מיקרוסופט ואחראי על הקשר בין מיקרוסופט לקהילת המפתחים בארץ.
תגיות: HTML‏  /  מדריך‏  /  בניית אתרים‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות