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

در ادامه سلسله مقالات آموزش زبان HTML در این مقاله با ویژگی های (Attribute) تگ های tr,td,th آشنا خواهید شد.

ویژگی های تگ tr

همانطور که در این مقاله مطالعه کردید تگ tr به منظور ایجاد یک ردیف در داخل تگ table استفاده می شود.هر جدول می بایست حداقل یک ردیف داشته باشد. در ادامه مقاله ابتدا ویژگی های (attributes) تگ tr را معرفی خواهیم کرد.

ویژگی align

نحوه ترازبندی افقی متن را در هر یک از سلول های آن ردیف مشخص می کند.این ویژگی یکی از مقادیر زیر را می تواند بپذیرد:

left : تراز متن از سمت چپ سلول
right : تراز متن از سمت راست سلول
center : قرار گرفتن متون در وسط سلول
justify : تمام سطرهای موجود در سلول در یک راستا تمام خواهند شد و در واقع متون داخل سلول ها منظم تر می شود.

ویژگی bgcolor

این ویژگی رنگ پس زمینه ردیف را مشخص می کند.

<tr bgcolor="red">
	<td>1</td>
    <td>2</td>
<tr>

ویژگی valign

تراز عمودی متن در هر یک از سلول های موجود در یک ردیف را مشخص می کند و یکی از مقادیر زیر را می پذیرد:

top : محتوای سلول در بالای سلول قرار خواهند گرفت
middle : محتوای سلول در وسط سلول قرار خواهند گرفت
bottom : محتوای سلول در پایین سلول قرار خواهند گرفت
baseline : محتوای سلول را با اولین خطی که محتوای سلول ها از آن آغاز می شود همتراز می کند

ویژگی های تگ های td,th

از تگ های td,th برای ایجاد سلول های داخل هر ردیف استفاده می شود.از تگ td به منظور ایجاد سلول هایی که شامل داده های جدولی ساده و از تگ th به منظور ایجاد عناوین جدولی استفاده می این دو تگ ویژگی های مشابهی دارند که در ادامه مقاله به معرفی انها خواهیم پرداخت.

ویژگی abbr

این صفت مشخص کننده مخففی از عبارت داخل سلول می باشد.به مثال زیر توجه کنید:

<td abbr="CSS">Cascading Style Sheets</td>

ویژگی align

نحوه ترازبندی محتوای سلول را در جهت افقی تعیین می کند.این ویژگی یکی از مقادیر left,right,center,justify را می تواند بپذیرد.عملکرد این 4 مقدار را در معرفی ویژگی align مربوط به تگ tr توضیح دادیم.

ویژگی valign

با استفاده از این ویژگی می توان تراز عمودی محتوای سلول را کنترل کرد.این ویژگی یکی از مقادیر top,bottom,middle,baseline را می پذیرد.عملکرد این مقادیر در توضیح ویژگی valign مربوط به ردیف ها توضیح داده شد.

ویژگی bgcolor

با استفاده از این ویژگی رنگ پس زمینه سلول را می توانید تعیین کنید.

<td bgcolor="red">محتوای سلول</td>

width

این ویژگی عرض سلول را مشخص می کند.این ویژگی یک مقدار عددی گرفته و عرض سلول را بر حسب پیکسل تعیین می کند.

<table border="1" align="center" dir="rtl" cellpadding="5">
	<tr>
		<td width="150">سطر اول ستون اول</td>
		<td width="50">سطر اول ستون دوم</td>
	</tr>
</table>

در این مثال عرض سلول اول را 150 پیکسل و عرض ستون دوم را 50 پیکسل تعیین کرده ایم.

ویژگی height

این ویژگی ارتفاع سلول را مشخص می کند. این ویژگی یک مقدار عددی گرفته و ارتفاع سلول را بر حسب پیکسل تعیین می کند.

ویژگی nowrap

این صفت بولین از شکسته شدن متن موجود در یک سلول جلوگیری می کند مگر اینکه در متن داخل سلول از تگ br استفاده شده باشد.صفاتی که از نوع بولین می باشند نیازی به مقدار ندارند و تنهای ذکر نام آنها کافی می باشد.

<td nowrape>محتوای سلول</td>

ویژگی colspan

با استفاده از این ویژگی می توانیم یک سلول را به طول چند ستون گسترش دهیم.این ویژگی یک مقدار عددی را می پذیرد که مشخص کننده تعداد ستون هایی است که سلول باید به تعداد آن گسترش یابد.به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>پیشگامان صفر و یک فرساد</title>
	</head>
	<body>
		<table border="1" align="center" dir="rtl" cellpadding="5">
			<tr>
				<td>سطر اول ستون اول</td>
				<td>سطر اول ستون دوم</td>
				<td>سطر اول ستون سوم</td>
			</tr>
			<tr>
				<td>سطر دوم ستون اول</td>
				<td colspan="2">سطر دوم ستون دوم</td>
			</tr>
			<tr>
				<td colspan="3">سطر سوم ستون اول</td>
			</tr>
		</table>
	</body>
</html>

خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود:

ویژگی rowspan

با استفاده از این ویژگی می توانیم یک سلول را به ارتفاع چند ردیف گسترش دهیم.این ویژگی یک مقدار عددی را می پذیرد که مشخص کننده تعداد ردیف هایی است که سلول باید به تعداد آن گسترش یابد.به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>پیشگامان صفر و یک فرساد</title>
	</head>
	<body>
		<table border="1" align="center" dir="rtl" cellpadding="5">
			<tr>
				<td rowspan="3">سطر اول ستون اول</td>
				<td>سطر اول ستون دوم</td>
				<td>سطر اول ستون سوم</td>
			</tr>
			<tr>
				<td>سطر دوم ستون دوم</td>
				<td rowspan="2">سطر دوم ستون سوم</td>
			</tr>
			<tr>
				<td>سطر سوم ستون دوم</td>
			</tr>
		</table>
	</body>
</html>

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