מבנה טבלאי ב-CSS

שייך לקטגוריות CSS, HTML

נתקלתי לא פעם במצב הבא:

קיימת רשימת פריטים שצריכה להסתדר בעמוד באופן הבא:

  • לכל אלמנט רוחב/גובה קבועים
  • ישנם מספר אלמנטים בשורה
  • בין שני אלמנטים צריך להיות רווח קבוע

 

רווחים קבועים בין כל תא

well, זהו מקרה קלאסי לטבלה! כן! אני ממש רואה את זה קורה, cellspacing מתאים וצבע רקע לטבלה, זה יהיה מושלם.

.NOT

אז CSS.

ההגדרות הן:

  • כל פריט 50*50
  • רווח בין כל פריט: 15 פיקסלים
  • 4 פריטים בשורה

 

ניצור div שיכלול את כל הפריטים. רוחבו יהיה 245, כדי לאכלס 4 פריטים + 3 ריווחים בין פריט לפריט (4*50 + 3*15).
כדי ליצור רשימה של פריטים בשורה נשתמש ב-float:right (או left) כדי להצמיד אותם לצד כלשהו. גם ל-div הכולל יש לתת את אותו ה-float. בכל פעם שנגיע לגבול התיבה בה נמצאים הפריטים, הפריט הבא ייפול לשורה הבאה.
כדי לרווח בין אלמנט לשני נשתמש ב-margin-left.
ופה הקאצ':

הריווחים הלבנים הם ה-margin של הפריטים שאמורים
להיות בשורה הראשונה

כפי שאפשר לראות, הריווח נוצר עבור כל פריט.
עקב חוסר מקום לריווח מצד ימין, הקוביה האחרונה בכל שורה נופלת. עקב הריווח התחתון, יש ריווח מיותר בסוף התיבה.
כל העיצוב שלנו השתבש.
אבל אם אנחנו לא רוצים להציג לעמודה האחרונה ריווח מהצד ולשורה האחרונה ריווח מלמטה?
תחכומים של css 3 עדיין לא כאן, ולא יהיו פה בזמן הקרוב (עד ש-IE7 יתפוס את מקומו של 6).

הטריק

משאירים את ה-margin.
מגדילים ל-div המכליל שלנו את הרוחב ל-265, כדי שיכיל גם את הריווח השמאלי של התיבה האחרונה.
יוצרים עוד div, נותנים לו את אותו float, מעלימים לו overflow ונותנים לו את הרוחב 245, בתוכו שמים את ה-div עם הפריטים.
ה-div עם הפריטים בעצם ימשיך אבל בגלל ש"חתכנו" אותו בתוך ה-div העוטף החדש, לא נראה את הריווחים המיותרים מהצד.
ומה לגבי הריווחים מלמטה? ניתן margin-bottom שלילי ל-div עם הפריטים כגובה הריווח התחתון.

הקוד

<style type="text/css">
/*<![CDATA[*/
.wrapper {
	direction:rtl;
	float:right;
	overflow:hidden;
	width:245px;
	border:5px solid #000;
}
.table {
	float:right;
	width:260px;
	margin-bottom:-15px;
}
.item {
	background-color:#ADCBDA;
	width:50px;
	height:50px;
	margin-left:15px;
	margin-bottom:15px;
	float:right;
}
/*]]>*/
</style>
<div class="wrapper">
	<div class="table">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>
elado
30 בנובמבר, 2006
16 תגובות »


קטגוריות

חיפוש

עיקבו אחרי (אקספרימנטלי!)

16 תגובות

כתיבת תגובה

12.12.06 בשעה 18:11
נועם

בדיוק מה שחיפשתי :-)
תודה רבה

1
31.12.06 בשעה 10:37
שרית
(אתר)

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

2
23.01.07 בשעה 10:01
NeoSwf
(אתר)

החסרון של מבנה אבסולוטי הוא שהוא אינו גמיש ונוטה לבאגים.

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

העלתי לאויר עמוד המתאר נכון יותר מבנה זה:
aTableListLike
עשיתי שימוש פה לראשונה במאפיני display table, table-row, table-cell
מבנה זה נתמך ie5.5, ff1, safari
הנה עמוד בדיקה שלו בbrowsershots
BrowserShots
היתרון של מבנה זה הוא שלא משנה לי גובה האלמנט הגבוה מכולם, לא משנה לי גובה הכותרת או אורכה- המבנה הזה גמיש.אתה יכול להגביל בעיצוב כל דבר שאתה רוצה, אך אם אתה צריך מבנה גמיש נטול הגבלות, מבנה זה בה לעזרתך

3
23.01.07 בשעה 10:43
אלעד
NeoSwf אמר/ה:
החסרון של מבנה אבסולוטי הוא שהוא אינו גמיש ונוטה לבאגים.

אין כאן שימוש במבנה אבסולוטי אלא floats.

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

מבנה טבלאי בא לעצב טבלה. עמודות, שורות, לרוב עם תכנים טקטואליים. כשיש חשיבות להשפעה על רוחב עמודה לפי העמודה הארוכה ביותר, והנתונים טבלאיים, צריך להשתמש בטבלה.
ברגע שאתה מתחיל להתעסק עם colspan/rowspan או כשהשורה האחרונה בטבלה לא מכילה את כל כמות התאים ואתה מוסיף תאים ריקים, הקוד שלך פחות סמנטי.

NeoSwf אמר/ה:
העלתי לאויר עמוד המתאר נכון יותר מבנה זה:
aTableListLike
עשיתי שימוש פה לראשונה במאפיני display table, table-row, table-cell

הקוד שלך לא תקני, לא ניתן לשים div בתוך ul. חוץ מזה, כך תצטרך בקוד צד השרת להדפיס כל 3 פריטים סגירה של ul, במקום הדפסה רציפה של כל הפריטים בתוך container אחד.

4
23.01.07 בשעה 11:15
NeoSwf
(אתר)

צודק לחלוטין, לא בדקתי ואלידיות.
אני אבדוק שימוש באלמנט אינלייני להחליף הדיב, אך מבדיקה ראשונית יש עם זה בעיות.

אין כאן שימוש במבנה אבסולוטי אלא floats.

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

מבנה טבלאי בא לעצב טבלה

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

ברגע שאתה מתחיל להתעסק עם colspan/rowspan או כשהשורה האחרונה בטבלה לא מכילה את כל כמות התאים ואתה מוסיף תאים ריקים, הקוד שלך פחות סמנטי.

למה אמרת את זה? לא דיברתי על כך.

שוב

להדפיס כל 3 פריטים סגירה של ul

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

למבנה אבסולוטי במידותיו אני אעיף את הטאגים התוחמים ואצור זרימה חופשית של LIים.

5
23.01.07 בשעה 11:17
NeoSwf
(אתר)

תוספת: אשמח לשמוע פתרון מצידך לבעיית גריד גמיש בעל ילדים צפים.

6
23.01.07 בשעה 11:25
אלעד

כשדיברתי על קוד פחות סמנטי, התכוונתי לכך שהוספת ul לכל 3 פריטים.

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

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

7
23.01.07 בשעה 11:32
NeoSwf
(אתר)

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

תודה על הלינק
שלומי

8
23.01.07 בשעה 11:37
אלעד

טעות שלי, כוונתי הייתה ל-div בכל 3 פריטים.
הקוד הכי "סמנטי" למקרה הזה יהיה ul שבתוכו מספר li צפים שלפי רוחב ה-ul "שוברים שורות".
וכאן אנו חוזרים לקוד שכתבתי במאמר (למרות שהוא כתוב עם divים).

9
23.01.07 בשעה 11:42
NeoSwf
(אתר)

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

10
23.01.07 בשעה 12:07
NeoSwf
(אתר)

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

< !ELEMENT ul (li)+>

בתוך UL יכול להתמקם רק LI. נקודה. ככה עובדת רשימה.

11
12.03.07 בשעה 22:26
רון

לא הבנתי משהו או שחסר הסבר,

אם זה מקרה קלאסי לטבלה -אז למה לא להשתמש בטבלה?
או שכוונת המאמר רק היה להראות אפשרויות עיצוב במצבים שונים ?.

יש לך אתר מאוד יפה ומאוד מהיר , אני בדיוק במעבר למודל בוקס.
כל הכבוד

12
13.03.07 בשעה 10:56
אלעד
רון אמר/ה:
לא הבנתי משהו או שחסר הסבר,

אם זה מקרה קלאסי לטבלה -אז למה לא להשתמש בטבלה?
או שכוונת המאמר רק היה להראות אפשרויות עיצוב במצבים שונים ?.

יש לך אתר מאוד יפה ומאוד מהיר , אני בדיוק במעבר למודל בוקס.
כל הכבוד

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

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

    .

    ותודה על הפידבק :)

13
21.03.07 בשעה 13:13
איתי

תודה רבה, עזרת לי מאוד

14
12.04.07 בשעה 0:31
יונתן

תודה רבה על הידע

אך בשורה תחתונה, מה באמת עדיף? טבלאות אמיתיות או דמוי טבלאות בעזרת CSS?

15
12.04.07 בשעה 9:06
אלעד
יונתן אמר/ה:
בשורה תחתונה, מה באמת עדיף? טבלאות אמיתיות או דמוי טבלאות בעזרת CSS?

טבלאות לbנתונים טבלאיים,
ו-css לרשימות של פריטים, תפריטים וכו'

16

כתיבת תגובה

תגיות מותרות לשימוש בתוכן
XHTML: אפשר להשתמש בתגים הללו: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre>