טבלאות ב HTML

בטבלאות HTML ניתן להשתמש לצורך הצגת נתונים בטבלה או לצורך עיצוב מבנה האתר.
לבניית טבלה נשתמש בתג <table> .
בכדי ליצור שורה בטבלה, נשתמש בתג <tr> ובכדי ליצור תא בשורה שיצרנו נשתמש בתג <td>. בכדי ליצור כותרת בתא נשתמש בתג <th> שמבוסס על התג <td> אך מדגיש את הטקסט ומציג אותו במרכז התא.

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

כותרת התא הראשון	כותרת התא השני
טקסט התא הראשון בשורה הראשונה	טקטס התא השני בשורה הראשונה
טקסט התא הראשון בשורה השניה	טקסט התא השני בשורה השניה
טקסט התא הראשון בשורה השלישית	טקסט התא השני בשורה השלישית

קוד ה HTML של הטבלה: (הטקסט מוצג הפוך באתר, מומלץ להעתיקו למסמך טקסט בכדי לראות אותו כפי שצריך)

<table border="1">
<tr>
<th>כותרת התא הראשון</th>
<th>כותרת התא השני</th>
</tr>
<tr>
<td>טקסט התא הראשון בשורה הראשונה</td>
<td>טקטס התא השני בשורה הראשונה</td>
<tr>
<td>טקסט התא הראשון בשורה השניה</td>
<td>טקסט התא השני בשורה השניה</td>
</tr>
<tr>
<td>טקסט התא הראשון בשורה השלישית</td>
<td>טקסט התא השני בשורה השלישית</td>
</tr>
</table>

אז מה עשינו כאן בעצם?1. באמצעות התג <table> יצרנו טבלה ובאמצעות הכיתוב  border="1" קבענו כי עובי הטבלה יהיה 1 פיקסל.
2. באמצעות התג <tr> יצרנו שורה חדשה בטבלה, סך הכל יצרנו 3 שורות.
3. באמצעות התג <th> יצרנו כותרת לתאים, סך הכל 2 כותרות.
4. באמצעות התג <td> יצרנו תאים, סך הכל יצרנו 6 תאים.

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

1. בכדי ליצור טבלה שתוצג ללא מסגרת, השתמשו בתג <table> כשהוא ריק (בלי הכיתוב  border="1" ).
2. בכדי לקבוע את מיקום הטקסט בשורה השתמשו בתג align בתוך ה <tr> וכתבו את הצד הרצוי: left (שמאל), right (ימין) או center (מרכז).
3. בכדי לגרום לתא לתפוס מספר תאים ברוחב הטבלה נשתמש בכיתוב colspan וניתן לו ערך מספרי. בכדי לגרום לתא לתפוס מספר תאים בגובה הטבלה נשתמש בכיתוב rowspan וניתן לו ערך מספרי. את  המאפיינים הנ"ל נרשום בתוך התג  <td>