הארת שורה בטבלה כשעומדים מעליה

למה אנו מתכוונים כשאנו מדברים על הארת (Highlight) שורה בטבלה

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

דוגמה לטבלה שבה שורות מוארות כאשר עומדים מעליהן

תחום ותק תיאור תפקיד שכר שנתי
תכנות 5-10 מתכנת ASP.NET 120,000
סיסטם 5-10 מנהל רשת 110,000
בסיסי נתונים 5-10 DBA 140,000

 

קוד ה - HTML הדרוש לבניית הטבלה

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

<table id="HiglightRow">
  <thead>
    <tr>
      <th>תחום</th>
      <th>ותק</th>
      <th>תפקיד</th>
      <th>שכר שנתי</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5-10</td>
      <td>תכנות</td>
      <td>מתכנת ASP.NET</td>
      <td>120,000</td>
    </tr>
   <tr>
      <td>5-10</td>
      <td>סיסטם</td>
      <td>מנהל רשת</td>
      <td>110,000</td>
   </tr>
   <tr>
      <td>5-10</td>
      <td>בסיסי נתונים</td>
      <td>DBA</td>
      <td>140,000</td>
   </tr>
  </tbody>
</table>

קוד ה - CSS הדרוש לנו לצורך הארת שורה בטבלה

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

#HiglightRow tr:hover {
   background-color:#317082; color:#FFF; }

#HiglightRow table {
   border:1px solid #000; border-collapse: collapse; }

#HiglightRow thead th { font-weight:bold; color:#000; background-color:#E2EBED; }
 
#HiglightRow td { padding:2px; }


 

שילוב של קוד ה - HTML עם קוד ה - CSS

בדוגמה הבאה אראה כיצד נמקם כותרת מתחת לטבלה:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>
 <head>
    <style type="text/css">
      #HiglightRow tr:hover {
          background-color:#317082; color:#FFF; }

     #HiglightRow table {
          border:1px solid #000; border-collapse: collapse; }

     #HiglightRow thead th { font-weight:bold; color:#000; background-   
          color:#E2EBED; }
 
     #HiglightRow td { padding:2px; }
    </style>

 </head>

 <body>
    <h3>דוגמה לטבלה עם שורות מוארות</h3>
    <table id="HiglightRow">
  <thead>
    <tr>
      <th>תחום</th>
      <th>ותק</th>
      <th>תפקיד</th>
      <th>שכר שנתי</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5-10</td>
      <td>תכנות</td>
      <td>מתכנת ASP.NET</td>
      <td>120,000</td>
    </tr>
   <tr>
      <td>5-10</td>
      <td>סיסטם</td>
      <td>מנהל רשת</td>
      <td>110,000</td>
   </tr>
   <tr>
      <td>5-10</td>
      <td>בסיסי נתונים</td>
      <td>DBA</td>
      <td>140,000</td>
   </tr>
  </tbody>
</table>


 <body>

</html>

הערה חשובה: אינטרנט אקספלורר יתמוך בהארת השורה רק אם בראש דף ה - HTML שלנו ימוקם ה - doctype של המסמך (נא ראו בדוגמת הקוד למעלה).

מדריכים, מאמרים וכלים נוספים בנושא זה

המדריך השלם לעיצוב טבלאות HTML בעזרת קוד CSS

מודל הטבלה ועבודה עם טבלאות ב - HTML


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש