עבודה עם טבלאות ב-HTML

טבלאות מאפשרות לארגן נתונים בצורה מסודרת בתצורת שורות ועמודות.

מבנה בסיסי של טבלה

הטבלה בנויה מתגיות <table>, <tr> (שורות), <th> (כותרות עמודות), ו-<td> (תאי מידע).

        <table border="1">
          <thead>
            <tr>
              <th>שם</th>
              <th>גיל</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>יוסי</td>
              <td>19</td>
            </tr>
            <tr>
              <td>מנחם</td>
              <td>25</td>
            </tr>
          </tbody>
        </table>
        

כאן יצרנו טבלה עם כותרות עמודות ונתונים בשורות.

עיצוב טבלאות

ניתן לעצב את הטבלה באמצעות CSS כדי לשפר את המראה שלה.

        <style>
          table {
            width: 100%;
            border-collapse: collapse;
          }
          th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
          }
          th {
            background-color: #f2f2f2;
          }
        </style>
        

כאן השתמשנו בעיצוב בסיסי לשיפור המראה של הטבלה.