יסודות הטבלאות
חלק מהיחידה יסודות במסלול ה-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 אונליין