HTML

טבלאות

מבנה בסיסי

טבלאות ב-HTML מורכבות מתגיות מקוננות:

<table>
    <tr>
        <th>כותרת 1</th>
        <th>כותרת 2</th>
    </tr>
    <tr>
        <td>תא 1</td>
        <td>תא 2</td>
    </tr>
</table>

דוגמה בסיסית

<table>
    <tr>
        <th>שם</th>
        <th>גיל</th>
        <th>עיר</th>
    </tr>
    <tr>
        <td>דני</td>
        <td>25</td>
        <td>תל אביב</td>
    </tr>
    <tr>
        <td>שרה</td>
        <td>30</td>
        <td>ירושלים</td>
    </tr>
</table>

תוצאה:

חלקי טבלה מתקדמים

<thead>, <tbody>, <tfoot>

מבנה סמנטי לחלקי הטבלה:

<table>
    <!-- ראש הטבלה -->
    <thead>
        <tr>
            <th>מוצר</th>
            <th>מחיר</th>
        </tr>
    </thead>

    <!-- גוף הטבלה -->
    <tbody>
        <tr>
            <td>חולצה</td>
            <td>99 ₪</td>
        </tr>
        <tr>
            <td>מכנסיים</td>
            <td>149 ₪</td>
        </tr>
    </tbody>

    <!-- תחתית הטבלה -->
    <tfoot>
        <tr>
            <th>סה"כ</th>
            <td>248 ₪</td>
        </tr>
    </tfoot>
</table>

יתרונות: - ✅ קריאות קוד טובה יותר - ✅ עיצוב נפרד לכל חלק - ✅ גלילה עם כותרת קבועה - ✅ הדפסה נכונה (כותרת בכל עמוד)

מיזוג תאים

colspan - מיזוג עמודות

<table>
    <tr>
        <th colspan="3">מידע אישי</th>
    </tr>
    <tr>
        <th>שם</th>
        <th>גיל</th>
        <th>עיר</th>
    </tr>
    <tr>
        <td>דני</td>
        <td>25</td>
        <td>תל אביב</td>
    </tr>
</table>

rowspan - מיזוג שורות

<table>
    <tr>
        <th>קטגוריה</th>
        <th>מוצר</th>
        <th>מחיר</th>
    </tr>
    <tr>
        <td rowspan="2">ביגוד</td>
        <td>חולצה</td>
        <td>99 ₪</td>
    </tr>
    <tr>
        <td>מכנסיים</td>
        <td>149 ₪</td>
    </tr>
    <tr>
        <td>נעליים</td>
        <td>סניקרס</td>
        <td>299 ₪</td>
    </tr>
</table>

שילוב colspan ו-rowspan

<table>
    <tr>
        <th colspan="2" rowspan="2">לוגו</th>
        <th colspan="3">2024</th>
    </tr>
    <tr>
        <th>ינואר</th>
        <th>פברואר</th>
        <th>מרץ</th>
    </tr>
    <tr>
        <th>מכירות</th>
        <th>דרום</th>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
</table>

כותרת טבלה (<caption>)

<table>
    <caption>טבלת ציונים - סמסטר א'</caption>
    <tr>
        <th>תלמיד</th>
        <th>ציון</th>
    </tr>
    <tr>
        <td>יוסי</td>
        <td>85</td>
    </tr>
</table>

💡 <caption> חייב להיות מיד אחרי פתיחת <table>

תכונות טבלה

תכונות ישנות (לא מומלצות)

<!-- לא מומלץ - השתמש ב-CSS במקום -->
<table border="1" cellpadding="10" cellspacing="5" width="100%">

הדרך הנכונה (CSS)

<table class="my-table">
    ...
</table>

<style>
.my-table {
    width: 100%;
    border-collapse: collapse;
}
.my-table th,
.my-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: right;
}
.my-table th {
    background-color: #f0f0f0;
}
</style>

סגנון CSS נפוץ לטבלאות

/* טבלה בסיסית */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

/* תאים */
th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: right;
}

/* כותרות */
th {
    background-color: #4a90d9;
    color: white;
}

/* שורות לסירוגין */
tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* hover */
tbody tr:hover {
    background-color: #f1f1f1;
}

טבלה רספונסיבית

<div style="overflow-x: auto;">
    <table>
        <!-- תוכן הטבלה -->
    </table>
</div>

נגישות בטבלאות

scope attribute

<table>
    <tr>
        <th scope="col">שם</th>
        <th scope="col">גיל</th>
    </tr>
    <tr>
        <th scope="row">דני</th>
        <td>25</td>
    </tr>
</table>

תיאור טבלה

<table aria-describedby="table-desc">
    <caption>ציונים</caption>
    ...
</table>
<p id="table-desc">טבלה זו מציגה את הציונים של כל התלמידים בכיתה.</p>

דוגמה מלאה

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>טבלת מוצרים</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: right;
        }
        th {
            background-color: #2196F3;
            color: white;
        }
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tbody tr:hover {
            background-color: #ddd;
        }
        tfoot {
            font-weight: bold;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <table>
        <caption>רשימת הזמנות - דצמבר 2024</caption>
        <thead>
            <tr>
                <th scope="col">מס'</th>
                <th scope="col">מוצר</th>
                <th scope="col">כמות</th>
                <th scope="col">מחיר</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>מקלדת</td>
                <td>2</td>
                <td>200 ₪</td>
            </tr>
            <tr>
                <td>2</td>
                <td>עכבר</td>
                <td>3</td>
                <td>150 ₪</td>
            </tr>
            <tr>
                <td>3</td>
                <td>מסך</td>
                <td>1</td>
                <td>800 ₪</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">סה"כ</td>
                <td>1,150 ₪</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

סיכום

← חזרה: רשימות | → המשך: טפסים