מאמרים אחרונים מאמרים אחרונים
14/11/2019 20:00
מה עושה קידום אתרים בגוגל (SEO) לקידום אתרים איכותי? איך עושים קידום אתרים נכון? במה מיוחד קידום אתר...
23/01/2019 15:14
אנו במיזם גרופ קיבלנו את תו אמון הציבור להגינות בעסקים.
24/10/2018 19:39
מתכנן הקמת חנות מתנות מקוונת? אספנו עבורך כל מה שחשוב לדעת לפני שאתה יוצא לדרך.
15/09/2018 19:27
יש לך עסק למכירת רהיטים או שאתה מתכנן אחד כזה בקרוב? קרא איך הקמת חנות וירטואלית למכירה של רהיטים בא...
06/09/2018 18:05
מחשבים זו אהבת חייך? האם חשבת למכור מחשבים, טלפונים סלולריים, קונסולות משחק וציוד היקפי באינטרנט? המ...
תגובות אחרונות תגובות אחרונות
תהליך בניית אתרים
17/10/2019 13:13
אחלה מאמר! ערך מעולה!
בניית חנות וירטואלית
29/08/2018 13:50
חברה לבניית אתר וחנות וירטואלי...
שפת שרת מול שפת לקוח
04/07/2018 15:45
היי, השפות PHP ו-PYTHON שתי...

תגית table

»
»
תגית 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
או מלא את הטופס להלן: