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

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

 
מאמרים אחרונים מאמרים אחרונים
15/02/2022 22:51
ככה תיבנו חנות וירטואלית מותאמת סלולר שתשפר את חוויית המשתמש ותגדיל את ההמרות.
03/02/2022 0:06
תקן HTML5 לצד הלקוח באתרי אינטרנט הוא התקן המוביל בימינו. קראו על היתרונות של התקן.
31/01/2022 15:40
בניית אתר אינטרנט בשפת צד השרת PHP היא בחירה חכמה בשפת פיתוח ותיקה, מובילה ומהירה.
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...
תגובות אחרונות פוסטים אחרונים בפורום
27/06/2022 23:53
שלום רב, ישנה בעיה קטנה בא...
27/06/2022 23:51
שלום! הבעיה שלי אסביר אותה הר...
27/06/2022 23:49
הי,כיצד כדאי להשקיע בשיווק של ...

תגית 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
יצחק
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

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

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