מבנה הטבלה הבסיסי

היתרון הבולט בעיצוב טבלאות ב : HTML הוא הגמישות . ניתן ליצר טבלאות שמשתרעות על פני כל הדף ללא תלות ברוחב העמוד שקובע המשתמש . ניתן גם ליצור תבנית מוצקה של הטבלה שלא ניתנת לשינוי ע"י המשתמש .

הצעד הראשון בלהבין איך להכין טבלאות הוא להבין אילו צורות ניתן לעשות ואילו לא.

נתחיל ברשת :

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

הדוגמא הבאה היא בלתי אפשרית :

בעיקרון אלו הם הכללים למה מותר ומה אסור בבניית טבלאות.

ישנם שלושה אלמנטים עיקריים בבניית טבלה. השורה (ROW) , התא (CELL) וכמובן הטבלה עצמה.

התגים הם :

טבלה : <table> .

שורה  : <tr> .

תא     : <td> .

הסיבה לכך שהתג המתאים לתא נקרא <td> ולא <tc> (Table Cell) הוא כנראה שראשי התיבות td הם Table Data .

חשוב לזכור שהתג <td> חייב תמיד להסתיים עם התג <tr> שחייב להסתיים עם התג <table> .

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

Cell 1	Cell 2
Cell 3	Cell 4

הקוד לבניית טבלה זו נראה כך :

<table border>

     <tr>

          <td>Cell 1</td>

          <td>Cell 2</td>

     </tr>

     <tr>

          <td>Cell 3</td>

          <td>Cell 4</td>

     </tr>

</table>

כפי שניתן לראות השורה הראשונה בטבלה מכילה את תאים 1 ו: 2 והשורה השניה בטבלה מכילה את התאים 3 ו:4 . תוכן התאים הוא " מספר תא "CELL שנמצאים בין התגים <td> ו: </td> .על מנת לראות את הטבלה בבירור הוספתי את המאפיין border לאלמנט הטבלה. מאפיין זה קובע את עובי המסגרת של הטבלה.

בטבלאות ניתן גם למזג תאים כמו בדוגמא הבאה :

Cell 1
Cell 3	Cell 4

ע"מ לייצר טבלה כזאת עליך להוסיף את המאפיין colspan כמו בדוגמת הקוד הבאה :

<table border>

     <tr>

          <td colspan=2>Cell 1</td>

     </tr>

     <tr>

          <td>Cell 3</td>

          <td>Cell 4</td>

     </tr>

</table>

ניתן גם למזג בין תאים באותה עמודה כמו בדוגמא הבאה :

Cell 1	Cell 2
	Cell 3

דבר זה מתאפשר ע"י הוספת המאפיין rowspan :

<table border>

     <tr>

          <td rowspan=2>Cell 1</td>

          <td>Cell 2</td>

     </tr>

     <tr>

          <td>Cell 3</td>

     </tr>

</table>