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

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

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

טבלאות, תגית table, tr, th, td

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. טבלאות, תגית table, tr, th, td
כיצד בונים טבלה עם שורות, תאים וכותרות? הכול על תגית 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

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