CSS Compliance - Table Layout in IE8
עיצוב אלמנטים בצורת טבלה מבלי להשתמש בתגיות טבלה ב - IE8
בהמשך לפוסטים על
IE8 הפעם נראה כיצד אפשר לעצב אלמנטים שונים כטבלה.
(לרשימה המלאה של אופציות ה -
display)
אחד מהדרכים הנפוצות לעצב דפי אינטרנט זה בעזרת טבלאות, החיסרון הגדול שלהם זה שקשה לשנות את העיצוב של צורת העמוד ובנוסף על כך לטבלה יש חוקים איזה אלמנטים יכולים לקונן.
בעזרת המאפיין display נוכל ב - IE8 לעצב אלמנטים שונים כאילו הם טבלה.
לדוגמא - הקוד הבא:
<div class="sTable">
<span class="sTR"><span class="sTD">1</span> <span class="sTD">Shlomo</span> </span>
<span class="sTR"><span class="sTD">2</span> <span class="sTD">Noam</span> </span>
<span class="sTR"><span class="sTD">3</span> <span class="sTD">Tomer</span> </span>
</div>
<style>
.sTD
{
display: table-cell;
padding-right: 3px;
padding-left: 3px;
}
.sTable
{
display: table;
}
.sTR
{
display: table-row;
}
</style>
יחזיר ב - IE8 את אותו אפקט של הקוד הבא
<table>
<tr>
<td>1</td>
<td>Shlomo</td>
</tr>
<tr>
<td>2</td>
<td>Noam</td>
</tr>
<tr>
<td>3</td>
<td>Tomer</td>
</tr>
</table>