HTML/טבלאות/פשוטות

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

הטבלאות הפשוטות

טבלה יוצרים על ידי אלמנט table. הטבלה מחולקת לשורות, על ידי צאצאים מסוג tr. (שורת טבלה) כל שורה מחולקת לתאים על ידי צאצאים מסוג td. (תא טבלה)

דוגמה פשוטה לטבלה עם שורה אחת ובה שני תאים (שתי עמודות):

<table>
  <tr>
    <td> עמודה ראשונה</td>
    <td> עמודה שניה</td>
  </tr>
</table>

עמודה ראשונה

עמודה שניה

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

• בתוך אלמנט table יש רק אלמנטים מסוג tr ולפחות אחד כזה!
• בתוך אלמנט tr יש רק אלמנטים מסוג td ולפחות אחד כזה!
• td יכול להכיל תגים מרוב הסוגים, כולל מהסוגים שורה וגוש, וכולל טבלאות נוספות בתוכו.

דוגמה לטבלה עם מספר שורות:

<table>
  <tr>
    <td><b> כותרת ראשונה </b></td>
    <td><b> כותרת שניה </b></td>
    <td><b> כותרת שלישית </b></td>
  </tr>
  <tr>
    <td> עמודה ראשונה </td>
    <td> עמודה שניה </td>
    <td> עמודה שלישית </td>
  </tr>
  <tr>
    <td> עמודה ראשונה </td>
    <td> עמודה שניה </td>
    <td> עמודה שלישית </td>
  </tr>
</table>

כותרת ראשונה	כותרת שניה	כותרת שלישית
עמודה ראשונה	עמודה שניה	עמודה שלישית
עמודה ראשונה	עמודה שניה	עמודה שלישית

מסגרת טבלה

• אפשרות זו עדיין קיימת ב-XHTML 1.0 STRICT אך ככל הנראה תפסיק להיתמך בעתיד. הפתרון: שימוש ב-CSS. ההמלצה בינתיים היא להימנע משימוש בה. בהמשך חלק זה, עקב כך שויקי מציגה כברירת מחדל טבלאות ללא מסגרת, אנו נשתמש במאפיין הזה אך נמליץ להמנע ממנו.

דפדפנים מסויימים מציגים טבלאות ללא מסגרות בין התאים כברירת מחדל. מומלץ לציין אם אנו רוצים מסגרת (border="1") או לא רוצים מסגרת (border="0") בתג הטבלה. כמו כן, נוכל לציין גם ערך גדול יותר, ולקבל מסגרת עבה.

דוגמאות:

<p>טבלה ללא מסגרת</p>
<table border="0">
  <tr>
    <td>1,1</td>     
    <td>2,1</td>     
  </tr>     
  <tr>
    <td>1,2</td>     
    <td>2,2</td>     
  </tr> 
</table>

<p>טבלה עם מסגרת דקה</p>
<table border="1">
  <tr>
    <td>1,1</td>     
    <td>2,1</td>     
  </tr>     
  <tr>
    <td>1,2</td>     
    <td>2,2</td>     
  </tr> 
</table>

<p>טבלה עם מסגרת עבה</p>
<table border="5">
  <tr>
    <td>1,1</td>     
    <td>2,1</td>     
  </tr>     
  <tr>
    <td>1,2</td>     
    <td>2,2</td>     
  </tr> 
</table>

טבלה ללא מסגרת

1,1	2,1
1,2	2,2

טבלה עם מסגרת דקה

1,1	2,1
1,2	2,2

טבלה עם מסגרת עבה

1,1	2,1
1,2	2,2

רוחב הטבלה

width - קובע את הרוחב הטבלה. אפשר לרשום בצורה של פיקסלים (px) או באחוזים.
width הינו מאפיין של table.

ניווט

הפרק הקודם: רשימות (מתחילים) או שער טבלאות (ללומדים על טבלאות)

טבלאות פשוטות תרגילים

הפרק הבא: טפסים למתחילים (מתחילים) או טבלאות מסובכות (טבלאות)

אלמנטים שנלמדו בפרק זה:

• table
• tr
• td