המדריך הבסיסי ל-HTML – חלק ז' – רשימות וטבלאות

הזמינו אותי לכוס קפה
buy me coffee

ב-HTML קיים אלמנט רשימה אשר באמצעותו נוכל לסדר אוסף של פריטים בתצוגת רשימה, טקסט או קישורים למשל

ישנם 3 סוגים של רשימות ב-HTML:

  • רשימה ממוספרת\ממוינת – Ordered List
  • רשימת בולטים – Unordered List
  • רשימה עם הגדרות – Definition List

רשימה ממוספרת

זוהי רשימה אשר הפריטים שבה ממוספרים לפי הסדר.
על מנת ליצור רשימה ממוספרת יש להשתמש בתגית פותחת ol.
את הפריטים שברשימה נשים בתוך תגית li (כל אחד מהפריטים).
לבסוף נסגור את הרשימה באמצעות תגית סוגרת ol:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1>this is an exemple of our basic HTML Document with List</h1>
</head>
<body>
    <p>this is an exemple of link, click <a href="https://www.technow.co.il">here</a>
        <br/>
        <br/>
        this is my image:
        <br/>
        <br/>
        <a href="https://www.g4a.co.il/">
            <img src="logo.png" alt="text" style="height: 100px;" style="width: 100px;">
        </a>
        <br/>
        to do list:
        <br/>
        <ol>
            <li>Eat breakfast</li>
            <li>Take a nice walk</li>
            <li>Program</li>
            <li>Eat dinner</li>
            <li>Go to sleep</li>
        </ol>
    </p>
</body>
</html>

במידה וניסיתם זאת בעצמכם, שמתם לב כי הפריטים מוספרו באופן אוטומטי:

HTML Ordered List
HTML Ordered List

רשימת בולטים

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

<ul>
    <li>Eat breakfast</li>
    <li>Take a nice walk</li>
    <li>Program</li>
    <li>Eat dinner</li>
    <li>Go to sleep</li>
</ul>

רשימה עם הגדרות

סוג נוסף של רשימה אשר קיים ב-HTML הוא Definition List.
לרשימה זו נוכל להתייחס כאל רשימת מונחים, כלומר שיש לה צמדי מפתחערך (keyvalue).
על מנת ליצור רשימה ממוספרת יש להשתמש בתגית פותחת dl.
נשים מפתח בתגית dt, כאשר את התיאור נשים בתגית dd.
את הרשימה נסגור באמצעות תגית סוגרת dl:

<dl>
    <dt>Lemon</dt>
    <dd>- Yellow sour fruit</dd>
    <dt>Strawberry</dt>
    <dd>- Red sweet fruit</dd>
</dl>

רשימה כתפריט ניווט ב-HTML

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

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="https://www.technow.co.il">Ask Questions</a></li>
</ul>
HTML Unordered List
HTML Unordered List

הוספת טבלאות ב-HTML

אלמנט שימושי נוסף שקיים ב-HTML הוא טבלה (Table).
נוכל להוסיף טבלה באופן שמעט מזכיר רשימות.
את הטבלה נקים באמצעות תגית פותחת table.
כל שורה (row) נכניס בתוך תגית th.
את השורה הראשונה שהיא למעשה הכותרות של העמודות, נגדיר כך שכל עמודה תהיה בתגית th.
לאחר מכן נוכל להכניס את הרשומות בתגיות td,
כאשר את הטבלה נסגור באמצעות תגית סוגרת table כמובן:

<table>
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Alfredo</td>
        <td>Mustakis</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mariuma</td>
        <td>Salvador</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Roland</td>
        <td>Magen</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Hilary</td>
        <td>Washington</td>
    </tr>
</table>

דוגמא זו תייצר לנו טבלה סטנדרטית.
כמובן שנוכל להעניק מאפיינים לטבלה באמצעות התגית style.
נוסיף את התגית לאזור ה-Head וניתן לה מאפיינים שישפרו את מראה הטבלה שיצרנו:

<style>
        table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
        }
        
        td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
        }
        
        tr:nth-child(even) {
          background-color: #dddddd;
        }
</style>

 

על מנת שנוכל לקבל את התוצאה הבאה:

HTML Table
HTML Table

בפרק הבא של המדריך נלמד כיצד להוסיף טפסים וכפתורים לדף האינטרנט שלנו.

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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