עיצוב טבלה - גבול, רווח וצבע

עיצוב טבלאות באמצעות CSS

כאשר אנו מעצבים טבלה ב-CSS, יש כמה דברים שנרצה להתייחס אליהם:

1. פריסת הטבלה - מידות הטבלה ואופן חלוקת העמודות הפנימי בטבלה.
2. גבולות הטבלה - אופן ציור קו הטבלה החיצוני וקווי חלוקת התאים הפנימיים.
3. יישור עמודות הטבלה - דרך היישור של התכנים בסכימה ובתאים הפנימיים.
4. ריווח תאי הטבלה - אופן יצירת המרווחים בתוך כל תא בטבלה.
5. עיצוב צבעי הטבלה - הבלטה של הסכימה (שורת הכותרת) של הטבלה, קביעת צבעים לשורות ולתוכן התאים.

עיצוב הטבלה יעשה באמצעות עיצוב האלמנטים השונים בטבלה:

1. עיצוב הטבלה עצמה - האלמנט table.
2. עיצוב מבנה גוף הטבלה - האלמנטים thead, tbody, tfoot.
3. עיצוב שורות הטבלה - האלמנט tr.
4. עיצוב תאי הטבלה - האלמנטים th, td.

כדי לבחון את אפשרויות העיצוב השונות, נתחיל ביצירת טבלה בסיסית ב-HTML:

<table>
	<caption>
		Points per person
	</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Points</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Daniel</td>
			<td>15</td>
		</tr>
		<tr>
			<td>Yael</td>
			<td>37</td>
		</tr>
		<tr>
			<td>John</td>
			<td>24</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Total</td>
			<td>76</td>
		</tr>
	</tfoot>
</table>

הפלט של הטבלה:

נבחן את עיצוב הטבלה הזו להלן.

פריסת טבלאות

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

לשם כך, נצטרך לקבוע 2 דברים:

1. קביעת רוחב הטבלה - את זה נעשה באמצעות התכונה width, שתקבל ערך בפיקסלים (גודל טבלה קבוע) או באחוזים (גודל טבלה יחסי לרוחב האלמנט בו היא נמצאת).
2. קביעת רוחב העמודות בטבלה - את זה נעשה באמצעות התכונה table-layout.

התכונה table-layout יכולה לקבל שני ערכים אפשריים:

• auto (ברירת המחדל) - התאמה אוטומטית של רוחב העמודות בהתאם לתוכן הפנימי בטבלה. האחריות לקביעת רוחב העמודות מוטלת על הדפדפן.
• fixed - רוחב קבוע שאותו אנו קובעים. קביעת הרוחב נעשית בצורה מפורשת ב-CSS עבור הסכימה של הטבלה, ויתר תאי הטבלה מותאמים לפי רוחב תאי הסכימה.

דוגמה:

table {
	margin:auto; /* center the table in the middle */
	max-width:600px;
	table-layout:fixed;
	width:80%;
}

table thead th:nth-child(1) {
	width:55%;
}

table thead th:nth-child(2) {
	width:45%;
}

בדוגמה זו, עיצבנו את הטבלה שלנו באופן הבא: רוחב הטבלה יהיה 80% מרוחב האלמנט בו היא נמצאת (width:80%), אבל לא יותר מאשר 600 פיקסלים (max-width:600px). הטבלה תמורכז לאמצע האלמנט (margin:auto). רוחב העמודות בטבלה יהיה רוחב קבוע (table-layout:fixed), כאשר העמודה הראשונה תהיה ברוחב 55% מרוחב הטבלה והעמודה השניה תהיה ברוחב 45% מרוחב הטבלה (שתי העמודות יתפסו בסך הכל 100% מרוחב הטבלה).

כמה דגשים שכדאי לשים אליהם לב:

1. בפריסת עמודות הטבלה (table-layout) עם הערך auto, אנו מעבירים את האחריות לקביעת רוחב העמודות לדפדפן. לכן, רוחב העמודות במקרה כזה יהיה שונה במעט בדפדפנים שונים וברזולוציות שונות.
2. מומלץ לקבוע את רוחב הטבלה (width) באחוזים ולא בפיקסלים, כיוון שטבלה שרוחבה נקבע בפיקסלים איננה רספונסיבית. במסכים עם רזולוציות נמוכות (במחשב, טאבלט, מכשיר סלולר) שבהם רוחב העמוד קטן מרוחב הטבלה שקבענו בפיקסלים, הטבלה תסטה מגבולות המסך ותפגע בתצוגה של העמוד.

קביעת גבולות לטבלה

נקבע קו גבול שחור אחיד לאלמנט table הראשי, ולתאי הטבלה td, th:

table, th, td {
	border:1px solid black;
}

פלט הטבלה יראה כך:

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

כדי למנוע את קו הגבול הכפול, נשתמש בתכונה border-collapse שיכולה לקבל את הערכים הבאים:

• separate (ברירת המחדל) - קווי הגבול של הטבלה נפרדים.
• collapse - קווי הגבול של הטבלה משותפים.

כדי ליצור טבלה ללא קווי גבול כפולים, נגדיר תמיד border-collapse:collapse.

נשתמש גם בתכונה border-spacing שקובעת את המרווחים בין תאי הטבלה ונקבע לה את הערך 0, כלומר, ללא מרווחים בין התאים השונים.

ה-CSS הסופי שלנו נראה כך:

table {
	border-collapse:collapse;
	border-spacing:0;
	margin:auto; /* center the table in the middle */
	max-width:600px;
	table-layout:fixed;
	width:80%;
}

table, th, td {
	border:1px solid black;
}

table thead th:nth-child(1) {
	width:55%;
}

table thead th:nth-child(2) {
	width:45%;
}

פלט הטבלה יראה כך:

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

נמרכז את תוכן הטבלה באמצעות התכונה text-align:center.

כדי למרכז רק את הסכימה של הטבלה, נגדיר את התכונה על האלמנט thead כך:

table thead {
	text-align:center;
}

כדי למרכז את כל הטבלה (ולא רק את הסכימה), נגדיר את התכונה על האלמנט table כך:

table {
	text-align:center;
}

נרווח במעט את תאי הטבלה (גם תאי td וגם תאי th) בין הכיתוב לגבול התא באמצעות הפקודה padding. ההגדרה תראה כך (ריווח של 8 פיקסלים):

th, td {
	padding:8px;
}

ה-CSS הסופי שלנו נראה כך:

table {
	border-collapse:collapse;
	border-spacing:0;
	margin:auto;
	max-width:600px;
	table-layout:fixed;
	text-align:center;
	width:80%;
}

table, th, td {
	border:1px solid black;
}

th, td {
	padding:8px;
}

table thead th:nth-child(1) {
	width:55%;
}

table thead th:nth-child(2) {
	width:45%;
}

פלט הטבלה נראה כך:

עיצוב צבעי הטבלה

נוכל לעצב את הטבלה בצבעים שונים. נתחיל בקביעת צבעי "זברה" ברקע השורות של גוף הטבלה (צבע רקע 1 וצבע רקע 2 שיתחלפו לסירוגין שורה-שורה).

נוסיף לקוד שלנו את השורות הבאות:

table tbody tr:nth-child(odd) {
	background-color:#f0f0f0;  /* light grey */
}

table tbody tr:nth-child(even) {
	background-color:#ffffff;  /* white */
}

שורות אלו למעשה קובעות שכל אלמנט tr שהוא אלמנט במקום אי זוגי (odd) בתוך אלמנט ההורה שלו tbody, יהיה בצבע f0f0f0 וכל אלמנט tr שהוא אלמנט במקום זוגי (even) בתוך אלמנט ההורה שלו tbody יהיה בצבע ffffff (לבן).

נעצב את הכותרת של הטבלה (caption):

table caption {
	color:#4d1099;
	font-size:24px;
	font-weight:bold;
	padding-bottom:5px;
}

בשורות אלו שינינו את צבע הכותרת ל-4d1099, את גודל הגופן ל-24 פיקסלים, הדגשנו את הגופן וריווחנו אותו ב-5 פיקסלים בתחתית.

נעצב את הסכימה של הטבלה (thead) ואת הסיכום הסופי (tfoot):

table thead {
	background-color:#1a0d99;
	color:#ffffff;
	font-weight:bold;
}

table tfoot {
	background-color:#b30f0f;
	color:#ffffff;
	font-weight:bold;
}

בשורות אלו הדגשנו את הגופן של הסכימה, שינינו את צבע הגופן ל-ffffff ואת צבע הרקע ל-1a0d99. כמו כן, הדגשנו את צבע החלק הסופי, שינינו את צבע הגופן ל-ffffff ואת צבע הרקע ל-b30f0f.

נוסיף אפקט במעבר עכבר על שורות הטבלה ב-tbody:

table tbody tr:hover {
	background-color:#999999;
	color:#ffffff;
	cursor:pointer;
}

קבענו שבכל מעבר עכבר על שורות הטבלה צבע הרקע יהיה 999999 (אפור כהה), צבע הגופן יהיה ffffff (לבן) וצורת הסמן של העכבר תשתנה מהחץ הסטנדרטי לסמן בצורת יד.

ה-CSS הסופי שלנו נראה כך:

table {
	border-collapse:collapse;
	border-spacing:0;
	margin:auto;
	max-width:600px;
	table-layout:fixed;
	text-align:center;
	width:80%;
}

table, th, td {
	border:1px solid black;
}

th, td {
	padding:8px;
}

table caption {
	color:#4d1099;
	font-size:24px;
	font-weight:bold;
	padding-bottom:5px;
}

table thead {
	background-color:#1a0d99;
	color:#ffffff;
	font-weight:bold;
}

table thead th:nth-child(1) {
	width:55%;
}

table thead th:nth-child(2) {
	width:45%;
}

table tbody tr:nth-child(odd) {
	background-color:#f0f0f0;  /* light grey */
}

table tbody tr:nth-child(even) {
	background-color:#ffffff;  /* white */
}

table tbody tr:hover {
	background-color:#999999;
	color:#ffffff;
	cursor:pointer;
}

table tfoot {
	background-color:#b30f0f;
	color:#ffffff;
	font-weight:bold;
}

פלט הטבלה נראה כך:

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