יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
12/01/2022 12:57
בניית חנות באינטרנט למדבקות קיר מעוצבות ולתמונות קנבס
05/01/2022 15:55
אתר מכירות פומביות לרכישת מוצרים באמצעות שיטת המכרז האנגלי לפיה זוכה בעל ההצעה הגבוהה ביותר
29/11/2021 16:33
29/11/2021 16:32
29/11/2021 16:32
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...

תגית table

  1. דף הבית
  2. מדריך HTML5
  3. תגית table

כיצד בונים טבלה עם שורות, תאים וכותרות? הכול על תגית table.

הגדרת טבלה ב-HTML5

ליצירת טבלה ב-HTML5 משתמשים בתגית table. כל טבלה מחולקת לשורות (table rows) המוגדרות ע"י תגית tr, ובדומה לכך, כל שורה מחולקת לתאי נתונים (table data) המכילים את המידע שמופיע בטבלה. את התאים יוצרים באמצעות התגית td. הדוגמה הבאה ממחישה את ההסבר:

<table>
<tr>
  <td>row 1, cell 1</td>
  <td>row 1, cell 2</td>
</tr>
<tr>
  <td>row 2, cell 1</td>
  <td>row 2, cell 2</td>
</tr>
</table>

בדוגמה זו ישנה תגית table שבתוכה שתי תגיות tr, שבכל אחת מהן שתי תגיות td. כלומר בטבלה יש שתי שורות ובכל שורה שני תאים. כך תיראה הטבלה הנוצרת ע"י הקוד הנ"ל:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

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

כותרת הטבלה

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

<table>
<tr>
  <th>Men</th>
  <th>Women</th>
</tr>
<tr>
  <td>Swimming</td>
  <td>Surfing</td>
</tr>
<tr>
  <td>Running</td>
  <td>Skying</td>
</tr>
</table>

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

Men Women
Swimming Surfing
Running Skying

המאפיינים colspan ו-rowspan עבור תאים בטבלה

לעתים, הטבלה שאנו זקוקים לה איננה סימטרית, ונרצה שבעוד שבשורה מסויימת יהיו נניח 5 תאים, בשורה אחרת יהיו רק 3 תאים. לשם כך ישנם מאפיינים שיעזרו לנו להגדיר את הרוחב של שורה ושל טור בטבלה. נשים לב כי מאפיינים אלו הם עבור התאים בטבלה (מסוג td או th) ולא עבור הטבלה עצמה.
colspan - מגדיר את רוחבו של התא בעמודות.
rowspan - מגדיר את גובהו של התא בשורות.

לדוגמא:

<table>
<tr>
  <td colspan="3">Training Program</td>
</tr>
<tr>
  <th rowspan="2">S<br />U<br />N<br />D<br />A<br />Y</th>
  <th>Men</th>
  <th>Women</th>
</tr>
<tr>
  <td>Swimming</td>
  <td>Surfing</td>
</tr>
</table>

דוגמא זו תראה כך:

Training Program
S
U
N
D
A
Y
Men Women
Swimming Surfing

הנחיה לעיצוב טבלאות

עיצוב הטבלה צריך להעשות באמצעות קובץ CSS חיצוני. בקוד ה-HTML5 אנו רושמים אך ורק את הסמנטיקה של הטבלה (כלומר את המבנה שלה: כותרות, שורות ותאים וכו').

עיצוב אתרים בטבלה

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

 

הוספת תגובה

אהבתי מאוד

(ל"ת)
05/02/2014 18:03
יצחק

רוצה שנקפיץ גם את העסק שלך?

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

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

 

לא מהססים! ממלאים את הטופס או מתקשרים עכשיו 077-7644819

 
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: