Nuvola apps bookcase Icône HS.svg
Emoji u1f3eb.svg

בתי ספר שמעוניינים להשתתף בפרויקט מוזמנים לשלוח דוא"ל לכתובת info@kidipedia.org.il

מדריך:HTML/שיעור 7

מתוך קידיפדיה
קפיצה אל: ניווט, חיפוש

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

התגים

התג <table> הוא התג שבתוכו יהיו כל האלמנטים, שורות ועמודות (טורים). האלמנטים שהוא יכיל יהיו תג, <tr>, וכל אלמנט כזה מייצג שורה בטבלה. השורות, יוצגו לפי סדר הופעתם בתוך התג <table>. בתוך התג <tr>, יהיו תגים של <td>, שהם מייצגים תא בתוך הטבלה.
להלן דוגמא לטבלה פשוטה ב-html:

<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>טור 1 שורה 1</td>
				<td>טור 2 שורה 1</td>
				<td>טור 3 שורה 1</td>
			</tr>
			<tr>
				<td>טור 1 שורה 2</td>
				<td>טור 2 שורה 2</td>
				<td>טור 3 שורה 2</td>
			</tr>
			<tr>
				<td>טור 1 שורה 3</td>
				<td>טור 2 שורה 3</td>
				<td>טור 3 שורה 3</td>
			</tr>
	
		</table>
	</body>
</html>

התוצאה של הקוד תהיה:

טור 1 שורה 1 טור 2 שורה 1 טור 3 שורה 1
טור 1 שורה 2 טור 2 שורה 2 טור 3 שורה 2
טור 1 שורה 3 טור 2 שורה 3 טור 3 שורה 3

בתוך התג <table> יש פרמטר ששמו border. הוא קובע אם וכמה יהיה העובי של גבולות הטבלה. בקוד שלנו, הגבול כרגע מוגדר כאחד, אבל, ניתן להגדיר אותו ליותר גדול. להלן דוגמא לטבלה אשר הגבול שלה מוגדר כ-2:

טור 1 שורה 1 טור 2 שורה 1 טור 3 שורה 1
טור 1 שורה 2 טור 2 שורה 2 טור 3 שורה 2
טור 1 שורה 3 טור 2 שורה 3 טור 3 שורה 3

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

טבלאות מורכבות

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

הפרמטר colspan

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

<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>טור 1 שורה 1</td>
				<td colspan="2">טור 2 שורה (וגם טור 3)</td>
		
			</tr>
			<tr>
				<td>טור 1 שורה 2</td>
				<td>טור 2 שורה 2</td>
				<td>טור 3 שורה 2</td>
			</tr>
			<tr>
				<td>טור 1 שורה 3</td>
				<td>טור 2 שורה 3</td>
				<td>טור 3 שורה 3</td>
			</tr>
	
		</table>
	</body>
</html>

והתוצאה תהיה:

טור 1 שורה 1 טור 2 שורה 1 (וגם טור 3)
טור 1 שורה 2 טור 2 שורה 2 טור 3 שורה 2
טור 1 שורה 3 טור 2 שורה 3 טור 3 שורה 3


המספר ש-colspan מקבל הוא "על כמה תאים להתפרס". כרגע הוא מוגדר כ-2, אבל ניתן להגדיר אותו גם ל-3:

טור 1 שורה 1 טור 2 שורה 1 (וגם טור 3)
טור 1 שורה 2 טור 2 שורה 2 טור 3 שורה 2
טור 1 שורה 3 טור 2 שורה 3 טור 3 שורה 3


ניתן לראות שבטבלה שלנו אין 4 טורים, ולכן התא שהגדרנו שיהיה בגודל 3 תאים לא התפרס אל מחוץ לשטח הטבלה.

פרמטר rowspan

מה שעשינו בעזרת הפרמטר colspan היה "למתוח" את התא לאורך השורה. הפרמטר rowspan יתתן לנו אפשרות למתוח את התא לאורך הטור.

<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>טור 1 שורה 1</td>
				<td>טור 2 שורה 1</td>
                                <td>טור 3 שורה 1</td> 
		
			</tr>
			<tr>
				<td>טור 1 שורה 2</td>
				<td>טור 2 שורה 2</td>
				<td rowspan="2">טור 3 שורה 2 ו-3</td>
			</tr>
			<tr>
				<td>טור 1 שורה 3</td>
				<td>טור 2 שורה 3</td>
		
			</tr>
	
		</table>
	</body>
</html>

התוצאה תהיה:

טור 1 שורה 1 טור 2 שורה 1 טור 3 שורה 1
טור 1 שורה 2 טור 2 שורה 2 טור 3 שורה 2 ו-3
טור 1 שורה 3 טור 2 שורה 3

טבלה בתוך טבלה

כדי לעשות טבלה בתוך טבלה, עלינו לשים תג <table> בתוך התג <tr>, ולעשות עוד טבלה. לדוגמא:

<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>טור 1 שורה 1</td>
				<td>טור 2 שורה 1</td>
				<td>טור 3 שורה 1</td>
		
			</tr>
			<tr>
				<td>טבלה חדשה
					<table border = "1">
						<tr>
							<td>טור 1 שורה 1</td>
							<td>טור 2 שורה 1</td>
						</tr>
						<tr>
							<td>טור 1 שורה 1</td>
							<td>טור 2 שורה 1</td>
						</tr>
					</table>
				</td>
				<td>טור 2 שורה 2</td>
				<td>טור 3 שורה 2</td>
			</tr>
			<tr>
				<td>טור 1 שורה 3</td>
				<td>טור 2 שורה 3</td>
				<td>טור 3 שורה 3</td>
			</tr>
	
		</table>
	</body>
</html>

והתוצאה תהיה:

טור 1 שורה 1 טור 2 שורה 1 טור 3 שורה 1
טבלה חדשה
טור 1 שורה 1 טור 2 שורה 1
טור 1 שורה 1 טור 2 שורה 1
טור 2 שורה 2 טור 3 שורה 2
טור 1 שורה 3 טור 2 שורה 3 טור 3 שורה 3

תרגול

  • כתבו את טבלה שגודלה 4X4
לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>טור 1 שורה 1</td>
				<td>טור 2 שורה 1</td>
				<td>טור 3 שורה 1</td>
				<td>טור 4 שורה 1</td>
		
			</tr>
			<tr>
				<td>טור 1 שורה 2</td>
				<td>טור 2 שורה 2</td>
				<td>טור 3 שורה 2</td>
				<td>טור 4 שורה 2</td>
			</tr>
			<tr>
				<td>טור 1 שורה 3</td>
				<td>טור 2 שורה 3</td>
				<td>טור 3 שורה 3</td>
				<td>טור 4 שורה 3</td>
			</tr>
			<tr>
				<td>טור 1 שורה 4</td>
				<td>טור 2 שורה 4</td>
				<td>טור 3 שורה 4</td>
				<td>טור 4 שורה 4</td>
			</tr>
	
		</table>
	</body>
</html>

  • כתבו את טבלה שהשורה הראשונה בה מכילה תא אחד בלבד. שתי השורות האחרונות יכילו 3 תאים.
לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<table border = "1">
			<tr>
				<td colspan="2">טור 1 שורה 1</td>
				
		
			</tr>
			<tr>
				<td>טור 1 שורה 2</td>
				<td>טור 2 שורה 2</td>
				<td>טור 3 שורה 2</td>
			</tr>
			<tr>
				<td>טור 1 שורה 3</td>
				<td>טור 2 שורה 3</td>
				<td>טור 3 שורה 3</td>
			</tr>

	
		</table>
	</body>
</html>

  • כתבו את טבלה שגודלה 3X3. בתא האמצעי, תהיה עוד טבלה שגודלה 3X3.
לפתרון התרגיל, לחצו כאן ←
<html>
	<head>
		<meta charset="utf-8">  
		<title> כותרת </title>
	</head>
	<body>
		<table border = "1">
			<tr>
				<td>טור 1 שורה 1</td>
				<td>טור 2 שורה 1</td>
				<td>טור 3 שורה 1</td>		
		
			</tr>
			<tr>
				<td>טור 1 שורה 2</td>
				<td>אמצע
					<table border = "1">
						<tr>
							<td>טור 1 שורה 1</td>
							<td>טור 2 שורה 1</td>
							<td>טור 3 שורה 1</td>		
						</tr>
						<tr>
							<td>טור 1 שורה 2</td>
							<td>טור 2 שורה 2</td>
							<td>טור 3 שורה 2</td>		
						</tr>
						<tr>
							<td>טור 1 שורה 3</td>
							<td>טור 2 שורה 3</td>
							<td>טור 3 שורה 3</td>		
						</tr>
					</table>
				</td>
				<td>טור 3 שורה 2</td>
			</tr>
			<tr>
				<td>טור 1 שורה 3</td>
				<td>טור 2 שורה 3</td>
				<td>טור 3 שורה 3</td>
			</tr>

	
		</table>
	</body>
</html>

לקריאה נוספת