יסודות הטבלאות
חלק מהיחידה יסודות במסלול ה-HTML של Coddy. שיעור 48 מתוך 60.
ב-HTML, טבלה היא דרך לארגן נתונים בשורות ובעמודות. טבלאות משמשות בדרך כלל להצגת נתונים בפורמט מובנה, כגון לוחות זמנים, נתונים סטטיסטיים או כל סוג אחר של מידע שניתן להציג ברשת. כדי ליצור טבלה, משתמשים בתג <table> לצד תגיות אחרות, כמו <tr> עבור שורות בטבלה, <td> עבור נתוני הטבלה (תאים) ו-<th> עבור כותרות הטבלה.
הנה המבנה הבסיסי של טבלת HTML:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>: תג שמגדיר שורה בטבלה.
<th>: תג שמגדיר תא כותרת. תאי כותרת משמשים בדרך כלל לכותרות של עמודות או שורות ומוצגים כברירת מחדל בטקסט מודגש.
<td>: התג שמגדיר תא רגיל בטבלה.
כך הטבלה הזו תוצג בדפדפן:
| כותרת 1 | כותרת 2 |
|---|---|
| שורה 1, תא 1 | שורה 1, תא 2 |
| שורה 2, תא 1 | שורה 2, תא 2 |
בדוגמה הזו יש לנו טבלה עם שתי שורות ושתי עמודות. השורה הראשונה מכילה תאי כותרת, והשורות שאחריה מכילות תאי נתונים רגילים. המבנה הזה יוצר פריסת רשת פשוטה שקל לקרוא ולהבין.
אתגר
קלצרו מסמך HTML שכולל טבלה במבנה הבא:
- תג
<table>להגדרת הטבלה. - שורת טבלה (
<tr>) לכותרת, ובה שני תאי כותרת (<th>). בתא הכותרת הראשון צריך להיות כתובName, ובשני צריך להיות כתובAge. - שורת טבלה (
<tr>) עם שני תאי נתונים (<td>). בתא הראשון צריך להיות כתובJohn, ובשני צריך להיות כתוב30. - שורת טבלה נוספת (
<tr>) עם שני תאי נתונים (<td>). בתא הראשון צריך להיות כתובJane, ובשני צריך להיות כתוב25.
נסו בעצמכם
<!DOCTYPE html>
<html>
<body>
<!-- כתבו כאן קוד -->
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
תרגלו בעצמכם: Web אונליין