המדריך הבסיסי ל-CSS ב-HTML – פרק ה' – עיצוב טבלאות וטפסים

באמצעות CSS ב-HTML נוכל גם לעצב טבלאות וטפסים על מנת לתת להם מראה מודרני וייחודי.

עיצוב טבלאות

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

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1 class="h1_class" style="text-shadow:0 0 5px #0000FF;">this is an exemple of our basic HTML Document with Table</h1>
</head>
<body>
    <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>
</body>
</html>

מיד תוכלו להבחין כי באופן דיפולטיבי, תצוגת הטבלה מיושנת ולא נוחה לשימוש:

CSS in HTML - tables
CSS in HTML – tables

צרו קובץ את קובץ ה-CSS (אשר קישרנו בשורה 4 של קוד ה-HTML) :

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    border: 4px solid;
    border-color: cadetblue;
    border-style: inset;
    width: 50%;
    background-color:aliceblue;
    }
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    }
tr:nth-child(1) {
    background-color: rgb(70, 60, 82);
    color: skyblue;
    }
tr:nth-child(even) {
    background-color: white;
    }

בדוגמא זו תוכלו לראות כיצד באמצעות תכונות שונות של מאפייני הטבלה נתנו לה מראה שונה לחלוטין.
על מנת שכל שורה תופיע בצבע אחר השתמשנו בסלקטור המיוחד nth לאלמנט tr.
סלקטור זה עובד שניתן להזין לו בין הסוגריים את מספר הדילוגים.
הוא מצפה לקבל ערכים כמו – even,odd, 1,2,3,4.

  • השתמשנו ב-1 על מנת לתת סגנון שונה לשורת כותרות העמודות של הטבלה (שורה 15).
  • השתמשנו ב-even אשר בוחר כל רשומה שמסומלת על ידי מספר זוגי על מנת שתיצבע שצבע שונה(שורה 19).

 

כעת נוכל להבחין שהטבלה שלנו קיבלה מראה שונה לחלוטין:

CSS in HTML - tables
CSS in HTML – tables

קצת על קיבוץ (grouping) – כאשר אנו מעוניינים להחיל את אותו הסגנון העיצובי על שני אלמנטים שונים,
אין צורך לכתוב את אותו הסגנון פעמיים, נוכל לכתוב סגנון אחד לשני האלמנטים, התחביר עובד כך שהם מופרדים בפסיקים:

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    }

בדוגמא זו ניתן לראות כי הגדרנו סגנון עיצובי אחד לשני אלמנטים שונים- td,th.

עיצוב טפסים באמצעות HTML ו-CSS

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

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1 class="h1_class" style="text-shadow:0 0 5px #0000FF;">this is an exemple of our basic HTML Document with Form</h1>
</head>
<body>
    <div class="container">
        <form action="">
      
          <label for="fname">First Name</label></form><br/>
          <input type="text" id="fname" name="firstname" placeholder="Please enter your first name"><br/>
      
          <label for="lname">Last Name</label><br/>
          <input type="text" id="lname" name="lastname" placeholder="Please enter your last name.."><br/>
      
          <label for="country">Country</label><br/>
          <select id="country" name="country"><br/>
            <option value="australia">Israel</option>
            <option value="canada">Thailand</option>
            <option value="usa">India</option>
          </select>
      
          <label for="subject">Subject</label>
          <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      
          <input type="submit" value="Submit">
      
        </form>
      </div>
</body>
</html>

לפניכם טופס לא מעוצב. כשם שטבלה נראית אנמית באופן דיפולטיבי – כך גם לגבי טפסים.
את קובץ ה-CSS שלנו ניצור כך:

input[type=text], select, textarea {
    width: 100%; 
    padding: 12px;  
    border: 4px inset #ccc; 
    border-radius: 4px; 
    border-color: beige;
    box-sizing: border-box; 
    margin-top: 6px; 
    margin-bottom: 16px; 
    resize: vertical 
  }
  
  input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #45a049;
  }
  
  .container {
    width: 50%; 
    border: 4px inset; 
    border-radius: 4px; 
    border-color: rgb(117, 82, 160);
    background-color: #b2c5c9;
    padding: 20px;
  }

כעת נוכל לראות שהטופס מעוצב, ברור ונוח לשימוש על ידי המשתמש.
שימו לב לשורה 22 – כך מגדירים שינוי צבע בעת אירוע – במקרה הזה אירוע שהעכבר מרחף מעל כפתור ה-submit .
בקובץ HTML נתנו לכל אזור הטופס בתגית div בורר class בשם container.
ואז בקובץ ה-CSS הגדרנו סגנון לאזור זה (שורה 26).
ובכך למעשנו יצרנו מעין "קופסא" מעוצבת שתוחמת את אזור הטופס:

CSS in HTML - Forms
CSS in HTML – Forms

בפרק הבא נלמד איך לארגן את דף האינטרנט שלנו על ידי שימוש ב-Grid.
לקריאה נוספת על CSS יש ללחוץ כאן

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

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

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

כתיבת תגובה

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

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

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