קהילות פורומים, הורדות, יעוץ ותמיכה


אשכולות דומים

  1. [מדריך] HTML בסיסי למתחילים. מאד בסיסי - מאד פשוט .
    על ידי israeliviper בפורום שפות צד לקוח
    תגובות: 39
    הודעה אחרונה: 21-11-2012, 15:49
  2. [מדריך] HTML למתחילים
    על ידי עילי מנדליאל בפורום האקינג ואבטחת מידע
    תגובות: 6
    הודעה אחרונה: 21-08-2010, 15:08
  3. תגובות: 6
    הודעה אחרונה: 02-11-2009, 15:01
  4. [מדריך] HTML בסיסי למתחילים. מאד בסיסי - מאד פשוט .
    על ידי israeliviper בפורום האקינג ואבטחת מידע
    תגובות: 23
    הודעה אחרונה: 13-03-2009, 16:56
מציג תוצאות 1 עד 6 מתוך 6

[מדריך][HTML]טבלאות ב-HTML

  1. #1

    ברירת מחדל [מדריך][HTML]טבלאות ב-HTML

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

    מבנה הטבלה
    להלן המבנה ליצירת טבלה:
    קוד:
    <table> <!-- תגית פתיחת הטבלה -->
    <tr> <!-- הגדרת שורה בטבלה -->
    <td> <!-- הגדרת תא בשורה -->
    ... <!-- תוכן התא -->
    </td> <!-- סיום התא בשורה -->
    </tr> <!-- סיום השורה בטבלה -->
    </table> <!-- תגית סיום הטבלה -->
    הסבר: זהו מבנה בסיסי של טבלה, כפי שניתן לראות כל טבלה מורכבת מ3 תגיות: <table> שמטרתה לסמן על תחילת וסיום הטבלה,
    <tr> שמטרתה להגדיר שורה בתוך הטבלה ו<td> שמטרתה להגדיר תא בתוך השורה. טבלה יכולה לספק אין סוף תאים, כך שאין ספק
    שטבלה יכולה גם להיות מאד מורכבת. הטבלה הנ"ל מגדירה רק שורה בודדה ותא בודד, לכן התוצאה של הטבלה הוא תא אחד.
    בהמשך נלמד איך ליצור טבלאות ארוכות, מורכבות, ומבלבלות הרבה יותר. בהצלחה!

    מאפייני הטבלה
    כדי ליצור עניין בטבלאותך, תצטרך להגיד לטבלאותך מאפיינים. מאפייני טבלה יכלים להיות גובה הטבלה, אורכה, וכו'...
    לטבלה יש מספר מאפיינים המוסברים בסעיף זה, כדי להוסיף מאפיין עליך לנהוג באופן הבא:
    קוד:
    <table NameOfPropertie="Value">
    בעוד ש-NameOfPropertie הוא שם המאפיין, וValue הוא הוא ערך המאפיין.

    הרשימה הבאה מפרטת על כל אחד ממאפייני הטבלה:
    • 1)width - רוחב בטבלה, המידות למאפיין זה נקבעות בפיקסלים או באחוזים. (פיקסלים - נקודות זעירות, אחוזים - רוחב יחסי ממסך המשתמש)
    • 2)height - גובה הטבלה, המידות למאפיין זה נקבעות בפיקסלים בלבד.
    • 3)border - עובי מסגרת הטבלה, נקבע במספרים מ0 ומעלה, בעוד ש0 היא טבלה ללא מסגרת.
    • 4)bordercolor - צבע המסגרת, נמדד בערכים הקסדצימליים (על בסיס 16) של צבעים.
    • 5)cellspacing - הרווח האנכי בין תאי הטבלה.
    • 6)cellpadding - הרווח האופקי בין תאי הטבלה.
    יצירת טבלה פשוטה
    בסעיף זה תיצור טבלה פשוטה. בעצם, תיצור טבלה שתשמש כחודש אוקטובר בלוח שנה. אם אתה חושב שלא תבין דבר, אל תאגה - הכל יתברר.
    זהו הקוד היוצר את הטבלה:
    קוד:
    <html dir="rtl">
    <head>
    <title>יצירת טבלה פשוטה</title>
    </head>
    <body bgcolor="FFFFFF">
    <table border="1" width="100%">
        <tr>
            <td align="center"><p>יום ראשון</p></td>
            <td align="center"><p>יום שני</p></td>
            <td align="center"><p>יום שלישי</p></td>
            <td align="center"><p>יום רביעי</p></td>
            <td align="center"><p>יום חמישי</p></td>
            <td align="center"><p>יום שישי</p></td>
            <td align="center"><p>יום שבת</p></td>
        <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
            <td><p>4</p></td>
            <td><p>5</p></td>
            <td><p>6</p></td>
            <td bgcolor="#999999"><p>7</p></td>
        </tr>
        <tr>
            <td><p>8</p></td>
            <td><p>9</p></td>
            <td><p>10</p></td>
            <td><p>11</p></td>
            <td><p>12</p></td>
            <td><p>13</p></td>
            <td bgcolor="#999999"><p>14</p></td>
        </tr>
        <tr>
            <td><p>15</p></td>
            <td><p>16</p></td>
            <td><p>17</p></td>
            <td><p>18</p></td>
            <td><p>19</p></td>
            <td><p>20</p></td>
            <td bgcolor="#999999"><p>21</p></td>
        </tr></p></td>
        </tr>
        <tr>
            <td><p>22</p></td>
            <td><p>23</p></td>
            <td><p>24</p></td>
            <td><p>25</p></td>
            <td><p>26</p></td>
            <td><p>27</p></td>
            <td bgcolor="#999999"><p>28</p></td>
        </tr>
        <tr>
            <td><p>29</p></td>
            <td><p>30</p></td>
            <td><p>31</p></td>
            <td><p>&nbsp;</p></td>
            <td><p>&nbsp;</p></td>
            <td><p>&nbsp;</p></td>
            <td><p>&nbsp;</p></td>
        </tr>
    </table>
    </body>
    </html>
    הסבר הקוד: בקוד מוגדרת טבלה התופסת את כל רוחב הדף, ובעלת מסגרת בעובי 1. בשורה הראשונה מוגדרים שבעת ימי השבוע, ע"פ סדרם.
    בחמשת השורות הבאות מוגדרות 5 שורות. כל תא בשורות אלו הוא בעצם יום בחודש. כפי שניתן לראות, לתאי השבתות יש מאפיין מיוחד:
    bgcolor="#999999". הדבר גורם לרקע התא להפוך לאפור, ובכך להדגיש את יום שבת בשבוע. תוכל לנסות להריץ את הקוד ולראות את התוצאה.

    התגית <tr>
    התגית <tr> שבטבלה מטרתה להגדיר שורה. בין התגית <tr> לתגית הסגירה שלה (</tr>), מוגדרים התאים שנמצאים באותה שורה.
    אין אפשרות להגדיר תאים שלא בתוך שורה, כך שתגית זו היא תגית הכרחית.

    כמו לטבלה עצמה, גם לתגית <tr> יש מאפיינים. להלן רשימת מפורטת של מאפייני התגית <tr>:
    • 1)width - רוחב השורה, המידות למאפיין זה נקבעות בפיקסלים או באחוזים.
    • 2)height - גובה השורה, המידות למאפיין זה נקבעות בפיקסלים בלבד.
    הערה: לא מומלץ להכריז על הגובה של השורה, אלא עדיף להכריז על גובה התאים הנמצאים בה. כמו כן רב הפעמים אין צורך להכריז
    על רוחב השורה, מכיוון שהיא אוטומטית תופסת את רוחב הטבלה, וזה בד"כ רצוננו. בקיצור: בד"כ עדיף לא להשתמש במאפייני <tr>, אלא במאפייני תאים. מאפיינים אלו יוסברו בסעיף הבא.


    התגית <td>
    התגית <td> מגדירה תא בשורת הטבלה. למעשה הטבלה עצמה, מורכבת רק מתאים, כך שהגדרת טבלה ללא תאים היא סתמית לחלוטין.
    לתאים יש מספר רב יחסית של מאפיינים. ע"י שילוב של מאפייני טבלה ומאפייני תא בטבלה, תוכל ליצור טבלה אסתטית ומושכת את העין.
    אין אתה חייב להגדיר על מאפיינים כלשהם, אך אלו יכולים לתרום המון אם תדע להשתמש בהם בצורה הנכונה.
    להלן רשימת המאפיינים של תא:
    • 1)width - רוחב התא בשורה. נמדד בפיקסלים ובאחוזים. לדוגמא תוכל להגדיר 2 תאים בשורה, ולאחד מהם לתת 20% מרוחב השורה ולשני 80%.
    • 2)height - גובה התא, עדיף להשתמש במאפיין זה כמאפיין תא, ולא כמאפיין שורה.
    • 3)bgcolor - צבע רקע לתא, יש להזין זאת בקוד הקסדצימלי של צבעים.
    • 4)background - תמונת רקע לתא, ערך המאפיין הוא כתובת התמונה.
    • 5)colspan - מספר הטורים שתופס התא, ברירת המחדל היא 1.
    • 6)rowspan - מספר השורות שתופס התא, ברירת המחדל היא 1.
    • 7)align - הצד של הטקסט בתא מבחינה אופקית: right - ימין, center - אמצע, left - שמאל.
    • 8)valign - הצג של הטקסט בתא מבחינה אנכית: top - פסגת התא, middle - אמצע התא, bottom - תחתית התא.
    תרגיל סיכום
    עכשיו, כשאתה מכיר את מאפייני הטבלה ומאפייני התא, ויודע למה משתמשת כל תגית בטבלה, נלמד איך ליצור טבלה מורכבת.
    רק להמחשה, תוצאתה הסופית של הטבלה צריכה להיות כזאת:
    [IMG]www.planetnana.co.il/talstuff/aTable.jpg[/IMG]

    להלן הקוד שיוצר את הטבלה:
    קוד:
    <html dir="rtl">‎
    <head>
    <title>TableTest</title>
    </head>
    <body>
    1)<table width="400" border="1" cellspacing="0" cellpadding="0" height="300">
    <tr>
    2)<td width="20%" rowspan="3" bgcolor="FFFF00"></td>
    3)<td width="80%" colspan="3" bgcolor="FF00FF" align="left" valign="top">
    <p>Created By Talika_G on ****.net</p></td>
    </tr>
    <tr>
    4)<td width="40%" rowspan="2" bgcolor="FF0000" align="right" valign="bottom">
    <p>AnotherTextHere</p></td>
    5)<td width="20%" rowspan="3" bgcolor="00FF00" valign="middle" align="center">
    <p>Text</p></td>
    6)<td width="20%" bgcolor="00FFFF"></td>
    </tr>
    <tr>
    7)<td width="20%" rowspan="2" bgcolor="000000"></td>
    </tr>
    <tr>
    8)<td height="60%" colspan="2" bgcolor="0000FF"></td>
    </tr>
    9)</table>
    </body>
    </html>
    הסבר: כדי שלא יווצר בלאגן, נסביר את הקוד שורה אחרי שורה ברשימה:
    • 1 )השורה מגדירה טבלה עם עובי מסגרת 1, ללא רווחים בין התאים, בגובה 300 פיקסלים וברוחב 400 פיקסלים
    • 2 )השורה מגדירה תא בשורה הראשונה של הטבלה. תא זה הוא בעל רקע צהוב, הוא תופס 3 שורות, ורוחבו הוא 20% מרוחב הטבלה.
    • 3 )השורה מגדירה תא נוסף בשורה ה-1. תא זה צבוע ברקע בצבע סגול. הוא ברוחב 80%, תופס 3 טורים, ובחלקו השמאלי למעלה כתוב הטקסט: Created By Talika_G on ****.net.
    • 4 )השורה מגדירה תא בשורה ה-2. צבע הרקע של תא זה הוא אדום, הוא תופס 40% מרוחב הטבלה, ו2 שורות. בחלקו הימני למעתה יהיה כתוב הטקסט: AnotherTextHere.
    • 5 )באותה השורה, מוגדר תא נוסף בצבצע ירוק. התא תופס 3 שורות ורוחבו הוא 20% מרוחב הטבלה. בחלקו האמצעי של התא יהיה כתוב הטקסט: Text.
    • 6 )זהו תא בצבע תכלת באותה שורה. התא תופס 20% מרוחב הטבלה.
    • 7 )בשורה ה-3, מוגדר תא חדש, צבעו הוא שחור והוא תופס 20% מרוחב הטבלה. כמו כן התא תופס 2 שורות.
    • 8 )זהו התא האחרון בטבלה. התא תופס 2 טורים, והוא תופס 60% מרוחב הטבלה. צבע הרקע של תא זה הוא כחול.
    תוכל לבדוק ולגלות, שהסכום של תאים בכל שורה הוא 100%. אם למשל מוגדר תא שתופס 2 שורות ורוחבו 20%, התא נחשב כ20% הן
    בשורה הראשונה והן בשורה השנייה. אם לא הבנת את הקוד, נסה להסתכל על התמונה הנ"ל ולבדוק כל תא ותא.
    נערך לאחרונה על ידי אור; 14-07-2007 בשעה 19:24.

  2. קישורים ממומנים

  3. #2
    משתמש משקיע
    תאריך הצטרפות
    01/2007
    הודעות
    4,045
    לייקים
    95
    נקודות
    0
    משפט מחץ
    לכל בעיה יש פיתרון ואם אין לה פיתרון היא לא בעיה
    מין: זכר

    ברירת מחדל

    נירא יפה אם זה שלך באמת אז כל הכבוד!

  4. #3
    בעלים
    תאריך הצטרפות
    08/2004
    גיל
    24
    הודעות
    14,445
    לייקים
    230
    נקודות
    1,090
    משפט מחץ
    אם אין אני לי, מי לי.
    מין: זכר

    ברירת מחדל

    מדריך מעולה, כל הכבוד.
    אני אישית למדתי משהו חדש :] אבל חובה לתרגל את זה ..

    תודה רבה.

  5. #4

    ברירת מחדל

    יאווו תודה עזרת לי אחי

  6. #5
    משתמש משקיע האוואטר של Future
    שם פרטי
    עומר
    תאריך הצטרפות
    05/2007
    גיל
    20
    הודעות
    2,826
    לייקים
    0
    נקודות
    505
    מין: זכר

    ברירת מחדל

    פשששש רואים שהשקעת

  7. #6
    משתמש מתחיל
    שם פרטי
    מאור
    תאריך הצטרפות
    11/2005
    הודעות
    55
    לייקים
    0
    נקודות
    0
    משפט מחץ
    מה שלא הורג אותך מחשל אותך
    מין: זכר

    ברירת מחדל

    תודה



הרשאות פרסום

  • אין באפשרותך לפרסם נושאים חדשים
  • אין באפשרותך לפרסם תגובות
  • אין באפשרותך לצרף קבצים
  • אין באפשרותך לערוך את הודעותיך


כל הזמנים הם לפי GMT +3. השעה כרגע היא 14:34.
מופעל על ידי vBulletin™ © גרסה 4.1, 2011 vBulletin Solutions, Inc. כל הזכויות שמורות.
פעילות הגולשים
אומנות וגרפיקה
מוזיקה
ספורט
סדרות טלוויזיה
סרטים וקולנוע
קנייה ומכירה
רשתות חברתיות
הבורר 3
פורומי פנאי ובידור
סרטים
סדרות
משחקים
דיבורים
אקטואליה
בעלי חיים
בדיחות והומור
משחקי ספורט
הבורר
מחשבים וטכנולוגיה
תמיכה טכנית
חומרה ומודינג
תוכנות להורדה
סלולארי וגאדג'טים
רקעים למחשב
ציוד הקפי למחשב
אבטחת מידע
תכנות ובניית אתרים
כסף ברשת
אייפון
בריאות ואורח חיים
כושר ופיתוח גוף
דיאטה
צבא וגיוס
יעוץ מיני
מה שבלב
אומנות הפיתוי
יהדות
מיסטיקה ורוחניות
אתאיזם ודתות

נושאים: 895,001 | הודעות: 6,568,124 | משתמשים: 290,992 | המשתמש החדש ביותר: pickup_jerusalem | עיצוב גרפי: סטודיו עודד בביוף | קידוד: rellect