آشنایی با جداول

در ادامه سلسله مقالات آموزش زبان html در این مقاله مباحث مربوط به جداول را ادامه می دهیم.

ایجاد عنوان برای جدول

به منظور ایجاد یک عنوان برای جداول خود می توانید از تگ caption استفاده کنید.این عنوان به طور پیش فرض در قسمت بالای جدول قرار می گیرد و معرف جدول می باشد،برای هر جدول تنها می توان از یک caption استفاده کرد و این تگ باید بلافاصله بعد از تگ table قرار گیرد.به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
   <head>
		<meta charset="utf-8"/>
		<title>پیشگامان صفر و یک فرساد</title>
   </head>
   <body>
		<table border="1">
			<caption>عنوان جدول</caption>
			<tr>
				<th>عنوان ستون اول</th>
				<th>عنوان ستون دوم</th>
				<th>عنوان ستون سوم</th>
			</tr>
			<tr> 
				<td>سطر اول ستون اول</td>
				<td>سطر اول ستون دوم</td>
				<td>سطر اول ستون سوم</td>
			</tr>
		  <tr>
				<td>سطر اول ستون اول</td>
				<td>سطر اول ستون دوم</td>
				<td>سطر اول ستون سوم</td>
		  </tr>
		   <tr>
				<td>سطر اول ستون اول</td>
				<td>سطر اول ستون دوم</td>
				<td>سطر اول ستون سوم</td>
		  </tr>
		</table>
	</body>
</html>

در تصویر زیر خروجی قطعه کد بالا را مشاهده می کنید.

همانطور که در تصویر فوق مشاهده می کنید عنوان جدول،بالای جدول قرار گرفته است اما تگ caption دارای یک ویژگی (attribute) به نام align می باشد که محل قرارگیری عنوان جدول را تعیین می کند.مقدار این ویژگی می تواند یکی از موارد زیر باشد :

Left : قرار گرفتن عنوان در سمت چپ جدول
right : قرار گرفتن عنوان در سمت راست جدول
top : قرار گرفتن عنوان در بالای جدول
bottom : قرار گرفتن عنوان در پایین جدول

نکته : این ویژگی در html5 پشتیبانی نمی شود و برای تعیین محل قرارگیری تگ caption می بایست از css استفاده کنید.

گروه بندی جداول

شما می توانید با توجه به طراحی خود،سلول های جدول را به صورت ستونی یا ردیفی گروه بندی کنید و به هر گروه استایل خاص خود را اعمال کنید.

گروه بندی ستون ها

ممکن است قصد داشته باشید برای یک یا چند ستون از جدول خود یک استایل خاصی را در نظر بگیرید،برای این منظور می توانید از تگ های colgroup,col استفاده کنید.دقت داشته باشید که تگ colgroup باید مستقیما داخل تگ table تعریف شود (اگر از تگ cpation استفاده کرده باشید،تگ colgroup باید بلافاصله بعد از تگ caption قرار بگیرد،در غیر اینصورت تگ colgroup باید اولین تگی باشد که داخل تگ table قرار می گیرد).

به عنوان مثال فرض کنید جدولی داریم که دارای 3 ستون می باشد و می خواهیم رنگ پس زمینه دو ستون قرمز و ستون دیگر زرد باشد،بدین منظور می توانیم از تگ col داخل تگ colgroup استفاده کنیم.هر تگ col مشخص کننده یک ستون می باشد اما این تگ دارای یک ویژگی (attribute) به نام span می باشد که با استفاده از آن می توانیم تعیین کنیم این تگ col مشخص کننده چند ستون از جدول ما می باشد.ویژگی span فقط مقدار عددی می پذیرد.به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
   <head>
		<meta charset="utf-8"/>
		<title>پیشگامان صفر و یک فرساد</title>
   </head>
   <body>
		<table border="1">
		  <colgroup>
			<col span="2" style="background-color:red">
			<col style="background-color:yellow">
		  </colgroup>
		  <tr>
			<th>عنوان ستون اول</th>
			<th> عنوان ستون دوم</th>
			<th>عنوان ستون سوم</th>
		  </tr>
		  <tr>
			<td>سطر اول ستون اول</td>
			<td>سطر اول ستون دوم</td>
			<td>سطر اول ستون سوم</td>
		  </tr>
		  <tr> 
			<td>سطر دوم ستون اول</td>
			<td>سطر دوم ستون دوم</td>
			<td>سطر دوم ستون سوم</td>
		  </tr>
	</table>
	</body> 
</html>

خروجی قطعه کد بالا را در تصویر زیر مشاهده می کنید.همانطور که مشاهده می کنید با استفاده از تگ های colgroup,col توانسیتم ستون های جدول خود را گروه بندی کرده و استایل مدنظر خود را به انها اعمال کنیم.

گروه بندی ردیفی

سه تگ thead، tbody و tfoot شیوه ی دیگری از فرمت بندی را در جداول html ارائه می کنند،تگ thead مشخص کننده هدر (سر تیتر) ستون ها می باشد،تگ tbody تعیین کننده بدنه اصلی جدول و تگ tfoot نیز نشان دهنده ردیف های پایینی جدول می باشد. تگ های مذکور به خودی خود تغییر خاصی ایجاد نمی کنند و باید با ویژگی های css استایل موردنظر بر روی آنها اعمال شود.

معمولا از گروه بندی های ردیفی هنگامی استفاده می شود که جدول بسیار طولانی است. یکی از کاربردهای گروه بندی ردیفی جداول زمانی است که می خواهیم از جدول خود پرینت بگیریم.اگر جدول ما طولانی شده و بیش از یک صفحه شود،هنگام پرینت گرفتن عناصر موجود در تگ thead در هر صفحه تکرار خواهند شد.

نکته : زمانی که از 3 تگ thead,tbody,tfoot استفاده می کنید لزومی ندارد حتما این تگ ها را به ترتیب و پشت سرهم استفاده کنید همیشه ردیف هایی که داخل تگ thead قرار می گیرند بالای جدول و ردیف هایی که داخل تگ tfootقرار می گیرند در پایین جدول ظاهر می شوند .به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>پیشگامان صفر و یک فرساد</title>
	</head>
	<body> 
		<table border="1" align="center" dir="rtl" cellpadding="5">
			<tfoot style="background:LightBlue ">
				<tr>
					<td>نویسنده : سعید شاملو</td>
					<td>شرکت : فرساد</td>
					<td>فروردین 1396</td>
				</tr>
			</tfoot> 
			<tbody style="background:Cornsilk">
				<tr>
					<td>سطر اول ستون اول</td>
					<td>سطر اول ستون دوم</td>
					<td>سطر اول ستون سوم</td>
				</tr>
				<tr> 
					<td>سطر اول ستون اول</td>
					<td>سطر اول ستون دوم</td>
					<td>سطر اول ستون سوم</td>
				</tr>
				<tr> 
					<td>سطر اول ستون اول</td>
					<td>سطر اول ستون دوم</td>
					<td>سطر اول ستون سوم</td>
				</tr>
			</tbody> 
			<thead style="background:DeepSkyBlue">
				<tr>
					<th>عنوان ستون اول</th> 
					<th> عنوان ستون دوم</th>
					<th>عنوان ستون سوم</th>	
				</tr>
			</thead> 
	     </table>
	</body> 
</html>

خروجی قطعه کد بالا را در تصویر زیر مشاهده می کنید.

همانطور که ملاحظه می کنید ردیف هایی که داخل تگ tfoot قرار داشتند در انتهای جدول،ردیف ها موجود در تگ tead در ابتدای جدول و ردیف هایی که داخل تگ tbody قرار داشتند بین thead,tfoot قرار گرفتند.

نکته : هر جدول می تواند شامل چندین عنصر tbodyاما فقط دارای یک عنصر tfoot و thead باشد.

در قسمت بعدی در مورد ویژگی های تگ های tr,td صحبت خواهیم کرد تا مباحث مربوط به جداول به پایان برسد.

امیدوارم مطالعه این مقاله برای شما مفید واقع شده باشد.با ادامه مقالات آموزش HTML,CSS با ما همراه باشید.

کامنت جدید ...