מדריכים לבניית אתרים

טבלאות

אחד מהחלקים החשובים ביותר באתרי אינטרנט הם טבלאות, למרות שהשימוש בהם ירד - עדיין חשוב לדעת איך להשתמש בהן כי הן אולי לא משמשות לקידוד העיצוב (נלמד בהמשך) אבל כן משתמשות להצגת מידע בצורה של תאים.

בשביל ליצור טבלה אננו נשתמש בתגים הבאים: <table> זה כדי להתחיל טבלה, <tr> כדי להתחיל שורה חדשה בטבלה ו-<td> כדי להתחיל תא מסויים.

למעשה זה מאוד םשוט והנה דוגמא קלה של טבלה עם 2 שורות ו-2 טורים:

	 <table>
			<tr>
				<td>תא 1</td>
				<td>תא 2</td>
			</tr>
			<tr>
				<td>תא 3</td>
				<td>תא 4</td>
			</tr>
	 </table>

נתחיל שורה שורה בקוד:

בשורה הראשונה אנחנו מרכיזים על טבלה, כל המידע על אותה טבלה יכנס בין שני התגים הללו. אחר כך אנחנו מתחילים שורה חדשה בעזרת התג <tr> שבתוכנו נוכל להכניס כמה תאים שרק נרצה. בין התגים של התאים <td> ו-</td> יכנס המלל, תוכן כלשהו שאנחנו רוצים. ואפשר להשתמש בכמה תאים שרוצים רק כדאי שאם בשורה אחת יש 2 תאים אז שגם בשורה השניה יהיו 2 תאים.

אחר כך אנחנו סוגרים את השורה הראשונה עם </tr> ואז שוב פעם מתחילים שורה חדשה וחוזרים על אותו תהליך. ולבסוף סוגרים את הקוד של הטבלה עם </table>

תמונה של הקוד ושל התוצאה הסופית

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

	 <table height="200px" width="100%" border="1px">
			<tr>
				<th>תא 1</th>
				<th>תא 2</th>
			</tr>
			<tr>
				<td>תא 3</td>
				<td>תא 4</td>
			</tr>
			<tr>
				<td>תא 3</td>
				<td>תא 4</td>
			</tr>
	 </table>

בקוד הזה אתם רואים שהוספנו לתג של הטבלה 3 אלמנטים חדשים: אחד זה גובה (Height) של 200 פיקסלים, השני זה רוחב של 100% (יתפרס לרוחב הדף) והשלישי הוא "מסגרת" של פיקסל 1 (border).

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