22 בספט׳ 2012

snippet - איך מסירים את כל attributes של האיפוס בטבלה (table) בCSS

בטח נתקלתם בבעיה שכל פעם שאתם משתמשים בטבלאות ב HTML , אתם צריכים לאתחל/לאפס את שלושת ה attributes של הטבלה, מדובר ב  cellspacing,  cellpadding,  border.

הבעיה - שבכל כתיבת טבלה, יש צורך באיפוס שלושת ה attributes שמגיעים ביחד איתו.



Syntax HTML ישן
<table cellspacing="0" cellpadding="0" border="0">
הפתרון
יישום ה styles הבאים:
לטבלה עצמה:
 - את הborder נאפס  עם border-width  עם הערך 0 (יחליף את האיפוס של ה border)
 - נוסיף את ה style מסוג border-spacing, וניתן לו את הערך 0. (יחליף את האיפוס של  ה cellspacing)
 - נוסיף את ה style מסוג border-collapse, וניתן לו את הערך collapse (זה patch בשביל גרסאות ישנות של אקספלורר, כגון אקספלורר 6 ו 7)
לתאי הטבלה עצמם:
- נוסיף את ה style מסוג padding עם הערך 0 (יחליף את האיפוס של ה cellpadding)

syntax של ה CSS
table{
  border:0;         /*replace border*/   
  border-spacing: 0px; /*replace cellspacing*/
  border-collapse: collapse; /*patch for IE-6 & IE-7 */   
}
table td{
  padding: 0px;/*replace cellpadding*/
}
מה שנשאר עכשיו הוא להוריד את ה attributes של הטבלה, אין בהם שימוש יותר.
Syntax HTML חדש
<table>

צפה בדוגמת קוד עובדת ומפרטת ( בדוגמא נתתי את ה עיצובים ע"י שימוש ב class, זה רק לצורך הדוגמא ולא מחייב שימוש בצורה הזו),  מומלץ לשים את הקוד הזה בדף stylesheet של איפוס css.

אם יש לכם שאלות בנושא אשמח שתטקבקו
אלעד שכטר