טבלאות HTML המוגדרות כברירת מחדל נראות די מפחידות - תזינו אותן עם כמה אפקטי CSS יפים.

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

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

עיצוב שורות ועמודים בודדים מודרניים

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

אתה יכול לראות את הקוד לתרגיל זה בו ריפו של GitHub.

  1. בקובץ HTML חדש, הוסף את מבנה קוד ה-HTML הבסיסי:
    html>
    <html>
    <רֹאשׁ>
    <כותרת>השולחן הפשוט שליכותרת>
    רֹאשׁ>
    <גוּף>

    גוּף>
    html>
  2. בתוך הגוף, הוסף תגיות טבלה:
    <שולחן>

    שולחן>
  3. רכיב טבלת HTML צריך להכיל שורת הטבלה תגים עבור כל שורה בתוך הטבלה. השורה העליונה משמשת בדרך כלל לכותרות. להשתמש כותרת טבלה תגי HTML לייצג כל עמודה בטבלה:
    <tr>
    <ה'>כותרת 1ה'>
    <ה'>כותרת 2ה'>
    <ה'>כותרת 3ה'>
    tr>
    4. instagram viewer
  4. הוסף שורות נוספות מתחת לשורת הכותרת. להשתמש נתוני טבלה תגי HTML להוספת נתונים לכל תא בטבלה:
    <tr>
    <td>שורה 1, עמודה 1td>
    <td>שורה 1, עמודה 2td>
    <td>שורה 1, עמודה 3td>
    tr>
    <tr>
    <td>שורה 2, עמודה 1td>
    <td>שורה 2, עמודה 2td>
    <td>שורה 2, עמודה 3td>
    tr>
    <tr>
    <td>שורה 3, עמודה 1td>
    <td>שורה 3, עמודה 2td>
    <td>שורה 3, עמודה 3td>
    tr>
    <tr>
    <td>שורה 4, עמודה 1td>
    <td>שורה 4, עמודה 2td>
    <td>שורה 4, עמודה 3td>
    tr>
    <tr>
    <td>שורה 5, עמודה 1td>
    <td>שורה 5, עמודה 2td>
    <td>שורה 5, עמודה 3td>
    tr>
  5. הוסף תג סגנון בתוך תג ה-head. הוסף קצת סגנון כללי לטבלה, כגון צללים, פינות שולחן מעוגלות, גופנים ושוליים:
    <סִגְנוֹן>
    שולחן {
    קריסת גבול: הִתמוֹטְטוּת;
    רוֹחַב: 100%;
    צֶבַע: #333;
    משפחת גופן: אריאל, פונט סאנס סריף;
    גודל גופן: 14פיקסלים;
    יישור טקסט: שמאלה;
    גבול-רדיוס: 10פיקסלים;
    הצפה: מוּסתָר;
    צל קופסא: 0 0 20פיקסליםrgba(0, 0, 0, 0.1);
    שולים: אוטומטי;
    שוליים למעלה: 50פיקסלים;
    שוליים-תחתית: 50פיקסלים;
     } 
    סִגְנוֹן>
  6. סגנון את כותרת הטבלה כדי לתת לה צבע רקע וטקסט מיושר:
    שולחןה' {
    צבע רקע: #ff9800;
    צֶבַע: #fff;
    משקל גופן: נוֹעָז;
    ריפוד: 10פיקסלים;
    שינוי טקסט: אותיות רישיות;
    ריווח אותיות: 1פיקסלים;
    הגבול העליון: 1פיקסליםמוצק#fff;
    גבול-תחתון: 1פיקסליםמוצק#ccc;
    }
  7. סגננו את שורות הטבלה כך שיתחלפו בין צבעים אפור ללבן, וכדי להוסיף אפקט בעת ריחוף מעל השורה:
    שולחןtr:ילד ראשון (אפילו)td {
    צבע רקע: #f2f2f2;
    }
    שולחןtr:לְרַחֵףtd {
    צבע רקע: #ffedcc;
    }
  8. סגנון הנתונים בתוך התאים של הטבלה:
    שולחןtd {
    צבע רקע: #fff;
    ריפוד: 10פיקסלים;
    גבול-תחתון: 1פיקסליםמוצק#ccc;
    משקל גופן: נוֹעָז;
    }
  9. פתח את קובץ ה-HTML שלך כדי להציג את הטבלה בדפדפן אינטרנט:

עיצוב שולחן סלולרי רב שורות

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

  1. הסר את כל שורות הטבלה הנוכחיות, השאר רק את העליונה עם הכותרות:
    <שולחן>
    <tr>
    <ה'>כותרת 1ה'>
    <ה'>כותרת 2ה'>
    <ה'>כותרת 3ה'>
    tr>
    שולחן>
  2. צור תא רב שורות באמצעות תכונת rowspan. פעולה זו תרחיב את התא על פני מספר השורות שצוין.
     מחלקה 1 
    <tr>
    <tdתוחלת שורות="2">תא רב-קוtd>
    <td>שורה 1, עמודה 2td>
    <td>שורה 1, עמודה 3td>
    tr>
    <tr>
    <td>שורה 2, עמודה 2td>
    <td>שורה 2, עמודה 3td>
    tr>
  3. כאשר מוסיפים עוד שורה מרובת תאים עם ערך טווח שורות שונה, הוסף את המספר המתאים של שורות טבלה תגי HTML. זאת כדי להתאים לגובה או למספר השורות שהתא משתרע על פניו. לדוגמה, אם לתא יש טווח שורות של 3, תצטרך להוסיף שלוש שורות לעמודות האחרות כדי ליישר את הטבלה כראוי.
     סעיף 2 
    <tr>
    <tdתוחלת שורות="3">תא רב-קוtd>
    <td>שורה 3, עמודה 2td>
    <td>שורה 3, עמודה 3td>
    tr>
    <tr>
    <td>שורה 4, עמודה 2td>
    <td>שורה 4, עמודה 3td>
    tr>
    <tr>
    <td>שורה 5, עמודה 2td>
    <td>שורה 5, עמודה 3td>
    tr>
  4. פתח את קובץ ה-HTML שלך כדי להציג את הטבלה בדפדפן אינטרנט:

עיצוב טבלת שורה ממוזגת

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

  1. הסר את כל שורות הטבלה הנוכחיות, השאר רק את העליונה עם הכותרות:
    <שולחן>
    <tr>
    <ה'>כותרת 1ה'>
    <ה'>כותרת 2ה'>
    <ה'>כותרת 3ה'>
    tr>
    שולחן>
  2. הוסף עוד שורות טבלה לטבלה. השתמש בתכונה colspan כדי למזג אחת מהשורות על פני 3 עמודות:
     מחלקה 1 
    <tr>
    <tdסִגְנוֹן="צבע רקע: #ffedcc"colspan="3">שאלה 1td>
    tr>
    <tr>
    <td>שורה 2, עמודה 1td>
    <td>שורה 2, עמודה 2td>
    <td>שורה 2, עמודה 3td>
    tr>
    <tr>
    <td>שורה 3, עמודה 1td>
    <td>שורה 3, עמודה 2td>
    <td>שורה 3, עמודה 3td>
    tr>
    <tr>
    <td>שורה 4, עמודה 1td>
    <td>שורה 4, עמודה 2td>
    <td>שורה 4, עמודה 3td>
    tr>
  3. הוסף עוד שורה ממוזגת כדי להפריד בין חלקי הטבלה:
     סעיף 2 
    <tr>
    <tdסִגְנוֹן="צבע רקע: #ffedcc"colspan="3">שאלה 2td>
    tr>
    <tr>
    <td>שורה 6, עמודה 1td>
    <td>שורה 6, עמודה 2td>
    <td>שורה 6, עמודה 3td>
    tr>
    <tr>
    <td>שורה 7, עמודה 1td>
    <td>שורה 7, עמודה 2td>
    <td>שורה 7, עמודה 3td>
    tr>
    <tr>
    <td>שורה 8, עמודה 1td>
    <td>שורה 8, עמודה 2td>
    <td>שורה 8, עמודה 3td>
    tr>
  4. פתח את קובץ ה-HTML שלך כדי להציג את הטבלה בדפדפן אינטרנט:

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

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

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