זה הרבה יותר טוב

הרבה יותר טוב נחש כמה מבנה יש בטבלה הקטנה הזו? 2.1K. ישנן 4 שורות ו-2 עמודות בדבר הזה. ואין כלל מרווחי תמונה (Spacer GIFs).
בדיוק מה שצריך וכל הגבולות המנוקדים האלה נעשו באמצעות CSS והם בהחלט תקניים.
  • זהו פריט רשימה עכשיו
  • בדיוק איך שהוא אמור להיות
כל זה נעשה עם 8 תאי טבלה ו-4 הגדרות CSS. ברצינות. 8 תאים ו-4 הגדרות CSS, זה כל מה שדרוש.
  • הידד לרשימות מובלטות
  • מדוע שלא פשוט תבנה רשימה מובלטת כרשימה מובלטת ותיתן ל-CSS לעשות את השאר?
אתה צריך הגדרה אחת עבור <table>, אחת עבור <td>, אחת עבור <ul> ועוד אחת עבור <li>. זהו-זה. ברגע שיש לך את אלו - אתה על הסוס.
  • אני מת על רשימות מובלטות.
  • מצויין! לא עוד הבלטות מזוייפות.

והנה קוד ה-CSS המשמש לסילוק המבנה המטופש:

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }