טבלאות | שפת HTML

מוטי אורן

מדריך לכתיבת טבלאות בשפת HTML

--
טבלה ב – HTML נכתבת בתוך התגית <table>.

אם נרצה שתהיה כותרת לטבלה (מעל הטבלה), נכתוב אותה בתגית שנקראת <caption>.

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

בינתיים זה ייראה כך:

<table>
  <caption></caption>
  <thead></thead>
  <tbody></tbody>
</table>

בכדי להגדיר שורות בטבלה, נשתמש בתגית <tr>, שמשמעותה table row – שורת טבלה. בתוך כל שורה נכניס את התגית <td> שמכילה את התאים של הטבלה (אפשר לשים כמה td שרוצים, זה תלוי כמה תאים אנחנו רוצים בכל שורה בטבלה). ואילו בשורת הכותרות של הטבלה, נכניס את התאים לתוך התג <th>.

אז אם לצורך העניין אני רוצה שבטבלה יהיו ארבע שורות ושלוש עמודות (חוץ משורת הכותרות שב – thead), אני אצטרך לכתוב זאת כך:

<table>
  <caption></caption>
  <thead></thead>
  <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </tbody>
<table>

תכונות מיוחדות בטבלאות:

לתגיות <th> ו - <td> ישנם שתי תכונות שנמנה כאן:

1: rowspan -- שאומר על פני כמה שורות התא יתפרס (כלפי מטה),
2: colspan -- שקובע על כמה עמודות התא יתפרס (הצידה).

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

<"td colspan="3"> <th colspan="3>

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

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1>כותרת גדולה</h1>
    <h6>כותרת קטנה</h6>
    <p>פסקת טקסט כל שהיא לא משנה מה תכתוב<br> פה זה יופיע וייראה מצויין</p>
    <img src="https://mitmachim.top/assets/uploads/profile/200-profileavatar-1603138032110.png">
    <ol>
        <li>apples</li>
        <li>oranges</li>
        <li>banana</li>
        <li>peach</li>
    </ol>
    <ul>
        <li>apples</li>
        <li>oranges</li>
        <li>banana</li>
        <li>peach</li>
    </ul>
    <dl>
        <dt>apples</dt>
        <dd>description of apples</dd>
        <dt>oranges</dt>
        <dd>description of oranges</dd>
        <dt>banana</dt>
        <dd>description of banana</dd>
        <dt>peach</dt>
        <dd>description of peach</dd>
    </dl>
    <table>
        <caption>כותרת</caption>
        <thead>
            <tr>
                <th>תא כותרת</th>
                <th>תא כותרת</th>
                <th>תא כותרת</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
            </tr>
            <tr>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
            </tr>
            <tr>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
            </tr>
            <tr>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
                <td>תא בטבלה</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

(נחשו מאיפה המקור של התמונה ששמתי ב - img)

ובסופו של דבר:

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