تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش CSS – بخش ششم

آموزش CSS

قسمت ششم آموزش CSS به تنظیمات اجزاء اختصاص یافته است. آنچه که در این قسمت یاد می‌گیرید تمام تنظیمات مربوط به لینک‌ها، فهرست‌ها و جداول است. بعد از یادگیری این مطالب می‌توانید هر کدام از این اجزاء را آنگونه که می‌خواهید استایل دهید و به جذابیت آن بیفزایید.

تنظیمات استایل لینک‌ها در CSS

در آموزش‌های HTML5 آموختیم که با تگ <a> لینکی را در صفحه قرار می‌دهیم. درون زوج تگ <a> عبارتی قرار می‌گیرد که می‌خواهیم لینک شود. به این طریق می‌توان لینکی ساده را درون صفحه قرار داد تا کاربر و مخاطب با کلیک بر روی آن به صفحه مقصد هدایت شود. در این قسمت از آموزش CSS تمام تنظیماتی را که می‌توانیم بر روی متن لینک شده انجام دهیم را بررسی می‌کنیم و می‌بینیم که چگونه می‌توان لینکی را به شکل دلخواه تغییر داد.

استایل دادن به لینک‌ها

رنگ، فونت و حتی رنگ پس زمینه لینک را می‌توان به دلخواه تغییر داد. برای این کار از پراپرتی های مربوطه یعنی color، font-family و background-color استفاده میکنیم. در واقع هر تغییرات ظاهری را که می‌توانستیم بر روی یک متن اعمال کنیم، بر روی لینک نیز می‌توان با استفاده از همان پراپرتی ها همان تغییرات را اعمال کرد. علاوه بر این، می‌توانیم تنظیمات دیگری را برای زمانی که نشانگر موس بر روی لینک قرار می‌گیرد و یا تغییرات لینک با فشردن دکمه موس (وقتی نشانگر روی آن است) و … را انجام داد. برای این تغییرات CSS هایی داریم. نحوه انجام تنظیمات بدین شکل است که ابتدا تگ لینک را انتخاب می‌کنیم و بعد دو نقطه ” : ” و در ادامه حالات لینک و بعد از آن دستورات CSS را برای آن حالت درون کروشه می‌نویسیم؛ یعنی الگو بدین‌صورت است:

a:state { CSS rules };

حالات مختلفی که یک لینک می‌تواند داشته باشد عبارتند از:

a:link: این رول یعنی لینک در حالتی که کلیک نشده است و نرمال است.

a:visited: یعنی وقتی کاربر لینک را مشاهده کرد. می‌توانیم مثلا رنگ لینک را بعد از مشاهده شدن توسط کاربر تغییر داد.

a:hover: برای انجام تنظیماتی است که کاربر نشانگر موس را بر روی لینک قرار داده است.

a:active: تنظیمات لینک در لحظه‌ای که کاربر نشانگر را بر روی لینک قرار داده و بر روی دکمه موس کلیک می‌کند با این رول انجام می‌شود.

در مثال زیر این حالات را بررسی می‌کنیم:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p> 1-لینک زیر یک لینک معمولی است و هیچ حالتی برای آن تعریف نشده است: </p>
	<a href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
</body>
</html>
[us_single_image image=”11090″ align=”center”]

در مثال زیر، در فایل CSS دستوراتی برای حالات مختلف لینک نوشته شده است. تنظیمات مربوط به هر حالت با کامنت مشخص شده است:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #ffffff;
	 	color: blue;
	}
	/* unvisited link */
a:link {
    color: olive;
}

/* visited link */
a:visited {
    color: pink;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: yellow;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p> 1- در لینک زیر برای هر حالت تنظیماتی سِت شده است. نشانگر را بر روی لینک قرار دهید، کلیک کنید و کلیک را نگه دارید. در هر مرحله می‌بینید که رنگ لینک تغییر میابد: </p>
	<a href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
</body>
</html>
[us_single_image image=”11091″ align=”center”]

نکته مهم: وقتی که تنظیمات حالات لینکها را انجام میدهید باید ترتیب زیر را رعایت کنید:

۱) ابتدا حالت a:link را تعیین کنید.

۲) مرحله دوم باید حالت a:visited را سِت کنید.

۳) a:hover در مرحله سوم سِت می‌شود

۴) در آخر نیز a:active تنظیم می‌شود.

Text Decoration

برای تزئین و آرایش متن می‌توانید از پراپرتی text-decoration استفاده کنید. تنظیم هر حالت می‌تواند این پراپرتی را داشته باشد. :

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	/* unvisited link */
a:link {
    color: olive;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: pink;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: hotpink;
    text-decoration: underline;
}

/* selected link */
a:active {
    color: yellow;
    text-decoration: underline;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p> 1- در لینک زیر برای هر حالت تنظیماتی سِت شده است. نشانگر را بر روی لینک قرار دهید، کلیک کنید و کلیک را نگه دارید. در هر مرحله می‌بینید که رنگ لینک تغییر میابد: </p>
	<a href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<p> <strong> نکته مهم: </strong> وقتی که تنظیمات حالات لینکها را انجام می‌دهید باید ترتیب زیر را رعایت کنید: <br>
	۱-	ابتدا حالت a:link را تعیین کنید. <br>
۲-	مرحله دوم باید حالت a:visited را سِت کنید. <br>
۳-	a:hover در مرحله سوم سِت می‌شود. <br>
۴-	در آخر نیز a:active تنظیم می‌شود.
 </p>
</body>
</html>
[us_single_image image=”11092″ align=”center”]

Background Color

یکی دیگر از تنظیماتی را که می‌توانید برای زیبا سازی لینک‌ها در حالات مختلف انجام دهید، تنظیم رنگی برای هر حالت از لینک است. همان‌طور که میدانید پراپرتی background-color برای این منظور استفاده می‌شود:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	/* unvisited link */
a:link {
    color: olive;
    text-decoration: none;
    background-color: #00ff00;
}

/* visited link */
a:visited {
    color: pink;
    text-decoration: none;
    background-color: #666633;
}

/* mouse over link */
a:hover {
    color: hotpink;
    text-decoration: underline;
    background-color: #ffcc99;
}

/* selected link */
a:active {
    color: yellow;
    text-decoration: underline;
    background-color: #9900cc;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p> 1- در لینک زیر برای هر حالت تنظیماتی سِت شده است. نشانگر را بر روی لینک قرار دهید، کلیک کنید و کلیک را نگه دارید. در هر مرحله می‌بینید که رنگ لینک تغییر میابد: </p>
	<a href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<p> <strong> نکته مهم: </strong> وقتی‌که تنظیمات حالات لینک‌ها را انجام می‌دهید باید ترتیب زیر را رعایت کنید: <br>
	۱-	ابتدا حالت a:link را تعیین کنید. <br>
۲-	مرحله دوم باید حالت a:visited را سِت کنید. <br>
۳-	a:hover در مرحله سوم سِت می‌شود. <br>
۴-	در آخر نیز a:active تنظیم می‌شود.
 </p>
</body>
</html>
[us_single_image image=”11093″ align=”center”]

بدون نوشتن هیچ کد جاوا اسکریپتی می‌توان یک لینک را به شکل یک دکمه قابل کلیک در آورد. برای این کار باید برای متن لینک شده حاشیه‌ای را ایجاد کرده و رنگ دلخواه را برای آن سِت کرد. چون عبارات همیشه در وسط دکمه نوشته می‌شوند، باید متن را وسط حاشیه قرار دهید. در مثال زیر با هم این روش را بررسی می‌کنیم. پراپرتی display را در قسمت‌های بعدی بررسی می‌کنیم.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	a:link, a:visited {
		color: white;
		border: 1px solid #bebebe;
		border-radius: 8px;
		text-decoration: none;
		text-align: center;
		background-color: #bebebe;
		padding: 15px;
		display: inline-block;
	}
	a:hover {
		background-color: #8c8c8c;
	}
	a:active {
		background-color: #646464;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p> با کلیک بر روی دکمه زیر به سایت سازان منتقل می‌شوید: </p>
	<a href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<p> <strong> نکته مهم: </strong> وقتی که تنظیمات حالات لینک‌ها را انجام می‌دهید باید ترتیب زیر را رعایت کنید: <br>
	۱-	ابتدا حالت a:link را تعیین کنید. <br>
۲-	مرحله دوم باید حالت a:visited را سِت کنید. <br>
۳-	a:hover در مرحله سوم سِت می‌شود. <br>
۴-	در آخر نیز a:active تنظیم می‌شود.
 </p>
</body>
</html>
[us_single_image image=”11094″ align=”center”]

در مثال بعدی نمونه دیگری را بررسی می‌کنیم که در آن a:hovor و a:active را با پراپرتی های همسان سِت کرده‌ایم:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	a:link, a:visited {
		border: 1px solid blue;
		border-radius: 8px;
		text-decoration: none;
		text-align: center;
		background-color: white;
		padding: 15px;
		display: inline-block;
	}
	a:hover, a:active {
		background-color: #8c8c8c;
		color: white;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p> با کلیک بر روی دکمه زیر به سایت سازان منتقل می‌شوید: </p>
	<a href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<p> <strong> نکته مهم: </strong> وقتی که تنظیمات حالات لینکها را انجام می‌دهید باید ترتیب زیر را رعایت کنید: <br>
	۱-	ابتدا حالت a:link را تعیین کنید. <br>
۲-	مرحله دوم باید حالت a:visited را سِت کنید. <br>
۳-	a:hover در مرحله سوم سِت می‌شود. <br>
۴-	در آخر نیز a:active تنظیم می‌شود.
 </p>
</body>
</html>
[us_single_image image=”11095″ align=”center”]

مثال دیگری را بررسی می‌کنیم که در آن ۷ لینک را در صفحه قرار داده‌ایم. هر ۷ لینک به دکمه تبدیل‌شده‌اند که با قرار دادن نشانگر بر روی هر کدام از آن‌ها، حالات لینک تغییر می‌کند. در این مثال می‌بینیم که هر تغییراتی از بزرگ شدن سایز گرفته تا تغییر مارجین و فونت و … را می‌توان به حالات یک لینک اعمال کرد:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	a.a01:link, a.a01:visited {
		border: 1px solid blue;
		border-radius: 8px;
		text-decoration: none;
		text-align: center;
		background-color: white;
		padding: 15px;
		display: inline-block;
	}
	a.a01:hover, a.a01:active {
		background-color: #8c8c8c;
		color: white;
	}

	a.a02:link, a.a02:visited {
		color: red;
		border: 1px solid #3366cc;
		border-radius: 8px;
		text-decoration: none;
		text-align: center;
		background-color: #3366cc;
		padding: 15px;
		display: inline-block;
	}
	a.a02:hover, a.a02:active {
		background-color: olive;
		color: white;
		font-family: monospace;
	}
	a.a03:link, a.a03:visited {
		color: black;
		border: 1px solid #ff9900;
		border-radius: 8px;
		text-decoration: none;
		text-align: center;
		background-color: #ff9900;
		padding: 15px;
		display: inline-block;
	}
	a.a03:hover, a.a03:active {
		color: black;
		background-color: #00ffff;
		color: white;
		font-weight: bold;
	}
	a.a04:link, a.a04:visited {
		color: white;
		border: 1px solid #cc0066;
		border-radius: 8px;
		text-decoration: none;
		text-align: center;
		background-color: #cc0066;
		padding: 15px;
		display: inline-block;
	}
	a.a04:hover, a.a04:active {
		background-color: yellow;
		color: white;
		font-size: 50px;
	}
	a.a05:link, a.a05:visited {
		color: green;
		border: 1px solid #ffff66;
		border-radius: 8px;
		text-decoration: none;
		text-align: center;
		background-color: #ffff66;
		padding: 15px;
		display: inline-block;
	}
	a.a05:hover, a.a05:active {
		color: green;
		background-color: #ff66ff;
		color: white;
	}
	a.a06:link, a.a06:visited {
		color: #333300;
		border: 1px solid #ff66ff;
		border-radius: 8px;
		text-decoration: none;
		text-align: center;
		background-color: #ff66ff;
		padding: 15px;
		display: inline-block;
	}
	a.a06:hover, a.a06:active {
		color: #333300;
		background-color: #ff0066;
		color: white;
		padding: 35px;

	}
	a.a07:link, a.a07:visited {
		color: #66ffff;
		border: 1px solid #ff0066;
		border-radius: 8px;
		text-decoration: none;
		text-align: center;
		background-color: #ff0066;
		padding: 15px;
		display: inline-block;
	}
	a.a07:hover, a.a07:active {
		color: #66ffff;
		background-color: #8c8c8c;
		color: white;
		margin: 30px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p> نشانگر موس را روی دکمه‌های زیر جابجا کنید و تغییرات layout هرکدام را مشاهده کنید: </p>
	<a class="a01" href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<a class="a02" href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<a class="a03" href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<a class="a04" href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<a class="a05" href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<a class="a06" href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<a class="a07" href="http://www.sitesazan.net" target="_blank"> سایت سازان </a>
	<p> <strong> نکته مهم: </strong> وقتی که تنظیمات حالات لینکها را انجام میدهید باید ترتیب زیر را رعایت کنید: <br>
	۱-	ابتدا حالت a:link را تعیین کنید. <br>
۲-	مرحله دوم باید حالت a:visited را سِت کنید. <br>
۳-	a:hover در مرحله سوم سِت میشود. <br>
۴-	در آخر نیز a:active تنظیم می‌شود.
 </p>
</body>
</html>
[us_single_image image=”11096″ align=”center”]

تنظیمات استایل لیستها با CSS

تا اینجا دیدیم که می‌توانیم از پراپرتی هایی که یاد گرفته‌ایم، برای استایل داده به لینک‌ها استفاده کنیم. در این بخش از قسمت ششم آموزش CSS می‌بینیم که چگونه می‌توانیم یک لیست ( مرتب یا نامرتب ) را به دلخواه استایل دهیم.

همان‌طور که میدانید لیستها به سه دسته مرتب، نا مرتب و توضیحی تقسیم می‌شوند. در لیستهای مرتب که با تگ <ol> ساخته می‌شوند آیتم‌ها با عدد و یا حروف متمایز می‌شوند. تگ <ul> که فهرست‌های نامرتب را ایجاد می‌کند، آیتم‌های آن با بولِت از هم جدا می‌شوند.

در این قسمت می‌بینیم که چگونه می‌توان با استفاده از دستورات CSS این لیست ها را آن‌گونه که می‌خواهیم تغییر دهیم و در قسمت‌های مختلف از آن‌ها استفاده کنیم. می‌توانیم با استفاده از دستورات CSS بولتها را تغییر دهیم، یک عکس را به جای اعداد یا حروف برای تمیز دادن آیتم‌ها قرار دهیم، چگونه رنگ زمینه کل لیست و یا رنگ زمینه آیتم‌ها را تغییر دهیم.

تغییر نحوه علامت‌گذاری آیتم‌ها

Item marker ها ( که به اختصار به آن‌ها مارکر میگوییم ) را می‌توان با استفاده از پراپرتی سه قسمتی list-style-type تغییر داد. مثلا می‌توانیم برای لیستهای نامرتب بولت را از دایره به مربع و یا در لیستهای مرتب، مارکر را از حروف لاتین به عدد و یا حروف رومی تغییر دهیم. در مثال زیر نحوه استفاده این پراپرتی را می‌بینیم:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	div {
		color: white;
		background-color: #a0a0a0;
		float: right;
		width: 270px;
		height: 240px;
		border: 2px solid red;
		margin: 15px;
		padding: 13px;
		direction: rtl;
		overflow: hidden;
	}
	ul.ul01 {
		list-style-type: circle;
	}
	ul.ul02 {
		list-style-type: square;
	}

	ol.ol01 {
		list-style-type: upper-roman;
	}
	ol.ol02 {
		list-style-type: lower-roman;
	}
	ol.ol03 {
		list-style-type: upper-latin;
	}
	ol.ol04 {
		list-style-type: lower-latin;
	}
	p.description {
		direction: rtl;
		color: #00ff00;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d01">
 	<p class="description"> در این دایو بولِت های لیست نامرتب را از دایره توپر ( که دیفالت است) به دایره تو خالی تغییر داده‌ایم: </p>
 	<ul class="ul01">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ul>
 </div>
 <div class="d02">
 	<p class="description"> در این دایو بولِت های لیست نامرتب را از دایره توپر ( که دیفالت است) به مربع تغییر داده ایم: </p>
 	<ul class="ul02">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ul>
 </div>
 <div class="d03">
 	<p class="description"> در این دایو مارکرها را از اعداد ( که دیفالت هستند ) به حروف رومی بزرگ و کوچک تغییر داده ایم: </p>
 	<ol class="ol01">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ol>
 	<ol class="ol02">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ol>
 </div>
 <div class="d04">
 	<p class="description"> در این دایو مارکرها را از اعداد ( که دیفالت هستند ) به حروف لاتین بزرگ و کوچک تغییر داده ایم: </p>
 	<ol class="ol03">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ol>
 	<ol class="ol04">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ol>
 </div>
<body>
</body>
</html>
[us_single_image image=”11097″ align=”center”]

قرار دادن یک عکس به عنوان مارکر

گفتیم که میتوانیم یک عکس را برای مارکر استفاده کرد. نحوه انجام این کار بدین ترتیب است که ابتدا پراپرتی list-style-image را می‌نویسیم و بعد مقدار ( url ‘ image address ‘ ) را به آن می‌دهیم.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	div {
		color: white;
		background-color: #a0a0a0;
		float: right;
		width: 270px;
		height: 240px;
		border: 2px solid red;
		margin: 15px;
		padding: 13px;
		direction: rtl;
		overflow: hidden;
	}
	ul.ul01 {
		list-style-image: url( images/markerimg.jpg );
	}
	ul.ul02 {
		list-style-image: url( images/markerimg2.jpg );
	}
	p.description {
		direction: rtl;
		color: #00ff00;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d01">
 	<p class="description"> در این دایو از یک عکس به عنوان مارکر استفاده شده است. اندازه عکس را باید متناسب با صفحه تغییر دهید: </p>
 	<ul class="ul01">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ul>
 </div>
 <div class="d02">
 	<p class="description"> در این دایو از یک عکس به عنوان مارکر استفاده شده است. اندازه عکس را باید متناسب با صفحه تغییر دهید: </p>
 	<ul class="ul02">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ul>
 </div>
<body>
</body>
</html>
[us_single_image image=”11098″ align=”center”]

عکس را میتوان به عنوان مارکر هم برای لیستهای مرتب و هم برای لیستهای نا مرتب قرار داد:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	div {
		color: white;
		background-color: #a0a0a0;
		float: right;
		width: 270px;
		height: 240px;
		border: 2px solid red;
		margin: 15px;
		padding: 13px;
		direction: rtl;
		overflow: hidden;
	}
	ul.ul01 {
		list-style-image: url( images/markerimg.jpg );
	}
	ol.ol02 {
		list-style-image: url( images/markerimg.jpg );
	}
	p.description {
		direction: rtl;
		color: #00ff00;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d01">
 	<p class="description"> در این دایو از یک عکس به عنوان مارکر برای یک لیست نا مرتب استفاده شده است. </p>
 	<ul class="ul01">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ul>
 </div>
 <div class="d02">
 	<p class="description"> در این دایو از یک عکس به عنوان مارکر برای یک لیست مرتب استفاده شده است. </p>
 	<ol class="ol02">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ol>
 </div>
<body>
</body>
</html>
[us_single_image image=”11099″ align=”center”]

تعیین محل قرار گیری مارکر

همان‌طور که میدانید بسته به پراپرتی های نوشته شده و جهت نگارش ( از راست به چپ نوشتن برای متن‌های فارسی و یا از چپ به راست نوشتن برای متن‌های لاتین ) خطوط این متن‌ها از سمت چپ ( برای متن‌های لاتین ) و از سمت راست ( برای متن‌های فارسی ) تراز می‌شوند؛ یعنی در یک سطح قرار می‌گیرند. درواقع جریان محتوای متنی بدین صورت است که از سمت شروع نوشتن، خطوط تراز باشند. حال اگر آیتم‌هایی که درون لیست قرار می‌گیرند متن‌هایی طولانی باشند، می‌توان تعیین کرد که مارکر ( می‌تواند عکس یا بولت و یا هر مارکر دیگری باشد ) در کجا قرار بگیرد؟ بیرون از خط تراز خطوط باشد و یا دقیقا روی خط تراز خطوط باشد؟

برای این کار پراپرتی به نام list-style-position را استفاده می‌کنیم و مقادیر inside برای تراز کردن خطوط و مارکر و outside برای قرار دادن مارکر در خارج از خط تراز، را می‌توانیم به آن بدهیم:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	div {
		color: white;
		background-color: #a0a0a0;
		float: right;
		width: 270px;
		min-height: 240px;
		border: 2px solid red;
		margin: 15px;
		padding: 8px;
		direction: ltr;
		overflow: hidden;
	}
	ul.ul11 {
		list-style-position: inside;
		direction: rtl;
	}
	ul.ul12 {
		list-style-position: outside;
		direction: rtl;
	}
	ol.ol21 {
		list-style-position: inside;
	}
	ol.ol31 {
		list-style-position: outside;
	}
	p.description {
		direction: rtl;
		color: #00ff00;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d01">
 	<p class="description"> در این دایو دو لیست داریم که لیست اول مارکرها درون جریان محتوا قرار دارند و در لیست دوم مارکرها بیرون از جریان محتوا هستند: </p>
 	<ul class="ul11">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ul>
 	<ul class="ul12">
 		<li> آیتم ۱ </li>
 		<li> آیتم ۲ </li>
 		<li> آیتم ۳ </li>
 		<li> آیتم ۴ </li>
 	</ul>
 </div>
 <div class="d02">
 	<p class="description"> در لیست زیر مارکرها درون جریان محتوا قرار دارند: </p>
 	<ol class="ol21">
 		<li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit atque ipsum numquam incidunt necessitatibus, illum omnis nihil sunt. Sit iste eveniet deserunt magnam, quasi. Alias, esse in totam ad quos! </li>
 		<li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque in, id animi facilis mollitia atque ducimus libero, tenetur, asperiores iusto vel eligendi corporis odio culpa aliquid repellat dicta aliquam incidunt. </li>
 		<li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia quod natus ullam, delectus blanditiis molestias praesentium qui dolore, nisi voluptate soluta odio dolorum doloremque tempora. Ducimus modi perferendis obcaecati repellat. </li>
 		<li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit accusamus eius quis ipsa aut provident fuga! Dicta, deserunt minus ullam ea, ducimus porro quo et neque culpa a vitae doloribus? </li>
 	</ol>
 </div>
 <div class="d03">
  <p class="description"> در لیست زیر مارکرها بیرون از جریان محتوا قرار دارند: </p>
 	<ol class="ol31">
 		<li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum aspernatur velit ipsa doloremque nisi sit nesciunt similique, fugit, aperiam tempore earum impedit obcaecati saepe repudiandae delectus qui voluptas tempora ratione. </li>
 		<li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod et nostrum neque esse. Voluptatum, non corrupti facere porro unde dolor cumque voluptatem temporibus architecto amet, sed possimus tenetur. Tempora, est? </li>
 		<li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eos alias in. Dolorem exercitationem, provident quo voluptas ipsa debitis aspernatur quis odio, cumque deleniti ab corporis aut doloribus fuga pariatur? </li>
 		<li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure repellendus, ad asperiores! Minus, id voluptates possimus quam quisquam repudiandae laudantium tempora dolorum, ipsam quas ipsum? Debitis iusto labore quisquam, enim! </li>
 	</ol>
 </div>
<body>
</body>
</html>
[us_single_image image=”11100″ align=”center”]

پراپرتی shorthand برای تنظیمات لیست

تنظیمات لیست نیز برای راحتی کار shorthand دارد. بدین ترتیب که پراپرتی list-style را مینویسیم و به آن مقدار می‌دهیم. ترتیب مقادیر به‌صورت زیر است:

مقدار اول پراپرتی list-style-type را مقدار دهی می‌کند.

مقدار دوم list-style-position را تعیین می‌کند

مقدار سوم برای تعیین مقدار list-style-image است که باید آدرس عکس را در url(‘ ‘) بنویسیم.

اگر هر کدام از سه مقدار بالا سِت نشوند، مقدار دیفالت نمایش داده می‌شود.

اگر کمی دقت کنید می‌بینید که موارد اول و سوم متناقض‌اند. چون زمانی که عکس را برای مارکر تعیین می‌کنیم دیگر نیازی به تنظیمات مارکر نداریم و یا برعکس، با تنظیمات بولت، نیازی به عکس نمی‌باشد!

ممکن است که عکس به هر دلیلی لود نشود که در این صورت آیتم‌های لیستمان، مارکری نخواهند داشت. برای همین لازم است که اگر عکسی برای مارکر انتخاب کردیم، تنظیمات list-style-type را هم انجام دهیم تا در صورت لود نشدن عکس، مارکری برای آیتم‌ها وجود داشته باشد.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	/*background-color: #66ffcc;*/
	 	color: blue;
	}
	ol {
		list-style: upper-alpha outside url('images/markerimg3.jpg');
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <ol>
 	<li> آیتم ۱ </li>
 	<li> آیتم ۲ </li>
 	<li> آیتم ۳ </li>
 	<li> آیتم ۴ </li>
 	<li> آیتم ۵ </li>
 </ol>
<body>
</body>
</html>
[us_single_image image=”11101″ align=”center”]

استایل دادن به لیست‌ها با رنگ

تعیین رنگ برای لیست برای بهتر دیده شدن و زیبا شدن لیست انجام می‌شود. می‌توان برای لیست‌ها هر رنگ دلخواهی را تعیین کرد. در حالت کلی استایل را هم می‌توان برای کل لیست و یا برای فقط آیتم‌ها یا برای هر دوی آن‌ها تغییر داد. هر پراپرتی که برای تگ‌های <ol> و یا <ul> نوشته شود، دستورات نوشته‌شده را برای کل لیست اعمال می‌کند و برای استایل دادن به آیتم‌ها، پراپرتی ها را برای تگ <li> می‌نویسیم.

/*style.css*/	
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	ul {
		border: 2px solid purple;
		padding: 25px;
		width: 250px;
		float: right;
		margin: 10px;
		list-style-type: square;

	}
	ol {
		border: 2px solid green;
		padding: 25px;
		width: 250px;
		float: right;
		margin: 10px;
		list-style-type: lower-alpha;
	}
	ul.ul1 {
		background-color: #cc33ff;
	}

	ol.ol1 {
		background-color: #66ff66;
	}

	ul.ul2 li {
		background-color: #ff99ff;
	}

	ol.ol2 li {
		background-color: #ffffcc;
	}

	ul.ul3 {
		background-color: #cc33ff;
	}
	ul.ul3 li {
		background-color: #ff99ff;
	}

	ol.ol3 {
		background-color: #66ff66;
	}
	ol.ol3 li {
		background-color: #ffffcc;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p> برای استایل دادن به کل لیست، پراپرتی را برای تگ های ol و یا ul مینویسیم. </p>
 <p> برای استایل دادن به آیتمها پراپرتی ها را برای تگ های li مینویسیم. </p>
 <p> می‌توان هم به کل لیست و هم به li ها همزمان استایل داد. </p>
 <ul class="ul1">
 	<li> آیتم ۱ </li>
 	<li> آیتم ۲ </li>
 	<li> آیتم ۳ </li>
 	<li> آیتم ۴ </li>
 	<li> آیتم ۵ </li>
 </ul>
 <ol class="ol1">
 	<li> آیتم ۱ </li>
 	<li> آیتم ۲ </li>
 	<li> آیتم ۳ </li>
 	<li> آیتم ۴ </li>
 	<li> آیتم ۵ </li>
 </ol>
 <ul class="ul2">
 	<li> آیتم ۱ </li>
 	<li> آیتم ۲ </li>
 	<li> آیتم ۳ </li>
 	<li> آیتم ۴ </li>
 	<li> آیتم ۵ </li>
 </ul>
 <ol class="ol2">
 	<li> آیتم ۱ </li>
 	<li> آیتم ۲ </li>
 	<li> آیتم ۳ </li>
 	<li> آیتم ۴ </li>
 	<li> آیتم ۵ </li>
 </ol>
 <ul class="ul3">
 	<li> آیتم ۱ </li>
 	<li> آیتم ۲ </li>
 	<li> آیتم ۳ </li>
 	<li> آیتم ۴ </li>
 	<li> آیتم ۵ </li>
 </ul>
 <ol class="ol3">
 	<li> آیتم ۱ </li>
 	<li> آیتم ۲ </li>
 	<li> آیتم ۳ </li>
 	<li> آیتم ۴ </li>
 	<li> آیتم ۵ </li>
 </ol>
<body>
</body>
</html>
[us_single_image image=”11102″ align=”center”]

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

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	ul {
		border: 2px solid purple;
		padding: 5px;
		width: 250px;
		float: right;
		margin: 10px;
		list-style-type: square;

	}
	ol {
		border: 2px solid green;
		padding: 25px;
		width: 250px;
		float: right;
		margin: 10px;
		list-style-type: lower-alpha;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p> در لیستهای زیر لیست نامرتب پَدینگ مناسب ندارد و بولتها بیرون از حاشیه قرار گرفته‌اند. <br> اما لیست مرتب مقدار پَدینگ مناسبی دارد و مارکر ها درون حاشیه قرار گرفته اند. </p>
 <ul class="ul1">
 	<li> آیتم ۱ </li>
 	<li> آیتم ۲ </li>
 	<li> آیتم ۳ </li>
 	<li> آیتم ۴ </li>
 	<li> آیتم ۵ </li>
 </ul>
 <ol class="ol1">
 	<li> آیتم ۱ </li>
 	<li> آیتم ۲ </li>
 	<li> آیتم ۳ </li>
 	<li> آیتم ۴ </li>
 	<li> آیتم ۵ </li>
 </ol>
<body>
</body>
</html>
[us_single_image image=”11103″ align=”center”]

حاشیه را برای لیستها نیز به هر لبه ای که می‌خواهیم می‌توانیم اعمال کنیم و هر تنظیماتی را که برای حاشیه انجام می‌دادیم، برای حاشیه لیست ( و در کل هر جزئی که بتوان برای آن حاشیه قرار داد ) نیز انجام داد.

همچنین مقدار پراپرتی list-style-type برای لیست‌های نامرتب ۴ مقدار و برای لیست‌های مرتب ۱۹ مقدار می‌گیرد. در مثال زیر تمام این موارد را بررسی می‌کنیم.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	ul {
		border: 2px solid purple;
		padding: 25px;
		width: 150px;
		float: right;
		margin: 5px;
	}
	ol {
		border: 2px solid hotpink;
		padding: 25px;
		width: 150px;
		float: right;
		margin: 5px;
	}
	ul.ul1 {list-style-type: circle;}
	ul.ul2 {list-style-type: disc;}
	ul.ul3 {list-style-type: square;}
	ul.ul4 {list-style-type: none;}

	ol.ol1 {list-style-type: armenian;}
	ol.ol2 {list-style-type: cjk-ideographic;}
	ol.ol3 {list-style-type: decimal;}
	ol.ol4 {list-style-type: decimal-leading-zero;}
	ol.ol5 {list-style-type: georgian;}
	ol.ol6 {list-style-type: hebrew;}
	ol.ol7 {list-style-type: hiragana;}
	ol.ol8 {list-style-type: hiragana-iroha;}
	ol.ol9 {list-style-type: katakana;}
	ol.ol10 {list-style-type: katakana-iroha;}
	ol.ol11 {list-style-type: lower-alpha;}
	ol.ol12 {list-style-type: lower-greek;}
	ol.ol13 {list-style-type: lower-latin;}
	ol.ol14 {list-style-type: lower-roman;}
	ol.ol15 {list-style-type: upper-alpha;}
	ol.ol16 {list-style-type: upper-latin;}
	ol.ol17 {list-style-type: upper-roman;}
	ol.ol18 {list-style-type: none;}
	ol.ol19 {list-style-type: inherit;}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p> برای لیستهای نا مرتب ۴ بولِت و برای لیستهای مرتب ۱۹ مارکر را میتوان تعیین کرد. </p>
 <ul class="ul1">
 	<li> مارکر circle </li>
 	<li> مارکر circle </li>
 	<li> مارکر circle </li>
 </ul>
 <ul class="ul2">
 	<li> مارکر disc </li>
 	<li> مارکر disc </li>
 	<li> مارکر disc </li>
 </ul>
 <ul class="ul3">
 	<li> مارکر square </li>
 	<li> مارکر square </li>
 	<li> مارکر square </li>
 </ul>
 <ul class="ul4">
 	<li> مارکر none </li>
 	<li> مارکر none </li>
 	<li> مارکر none </li>
 </ul>
 <ol class="ol1">
 	<li> مارکر armenian </li>
 	<li> مارکر armenian </li>
 	<li> مارکر armenian </li>
 </ol>
 <ol class="ol2">
 	<li> مارکر cjk-ideographic </li>
 	<li> مارکر cjk-ideographic </li>
 	<li> مارکر cjk-ideographic </li>
 </ol>
 <ol class="ol3">
 	<li> مارکر decimal </li>
 	<li> مارکر decimal </li>
 	<li> مارکر decimal </li>
 </ol>
 <ol class="ol4">
 	<li> مارکر decimal-leading-zero </li>
 	<li> مارکر decimal-leading-zero </li>
 	<li> مارکر decimal-leading-zero </li>
 </ol>
 <ol class="ol5">
 	<li> مارکر georgian </li>
 	<li> مارکر georgian </li>
 	<li> مارکر georgian </li>
 </ol>
 <ol class="ol6">
 	<li> مارکر hebrew </li>
 	<li> مارکر hebrew </li>
 	<li> مارکر hebrew </li>
 </ol>
 <ol class="ol7">
 	<li> مارکر hiragana </li>
 	<li> مارکر hiragana </li>
 	<li> مارکر hiragana </li>
 </ol>
 <ol class="ol8">
 	<li> مارکر hiragana-iroha </li>
 	<li> مارکر hiragana-iroha </li>
 	<li> مارکر hiragana-iroha </li>
 </ol>
 <ol class="ol9">
 	<li> مارکر katakana </li>
 	<li> مارکر katakana </li>
 	<li> مارکر katakana </li>
 </ol>
 <ol class="ol10">
 	<li> مارکر katakana-iroha </li>
 	<li> مارکر katakana-iroha </li>
 	<li> مارکر katakana-iroha </li>
 </ol>
 <ol class="ol11">
 	<li> مارکر lower-alpha </li>
 	<li> مارکر lower-alpha </li>
 	<li> مارکر lower-alpha </li>
 </ol>
 <ol class="ol12">
 	<li> مارکر lower-greek </li>
 	<li> مارکر lower-greek </li>
 	<li> مارکر lower-greek </li>
 </ol>
 <ol class="ol13">
 	<li> مارکر lower-latin </li>
 	<li> مارکر lower-latin </li>
 	<li> مارکر lower-latin </li>
 </ol>
 <ol class="ol14">
 	<li> مارکر lower-roman </li>
 	<li> مارکر lower-roman </li>
 	<li> مارکر lower-roman </li>
 </ol>
 <ol class="ol15">
 	<li> مارکر upper-alpha </li>
 	<li> مارکر upper-alpha </li>
 	<li> مارکر upper-alpha </li>
 </ol>
 <ol class="ol16">
 	<li> مارکر upper-latin </li>
 	<li> مارکر upper-latin </li>
 	<li> مارکر upper-latin </li>
 </ol>
 <ol class="ol17">
 	<li> مارکر upper-roman </li>
 	<li> مارکر upper-roman </li>
 	<li> مارکر upper-roman </li>
 </ol>
 <ol class="ol18">
 	<li> مارکر none </li>
 	<li> مارکر none </li>
 	<li> مارکر none </li>
 </ol>
 <ol class="ol19">
 	<li> مارکر inherit </li>
 	<li> مارکر inherit </li>
 	<li> مارکر inherit </li>
 </ol>
<body>
</body>
</html>
[us_single_image image=”11104″ align=”center”]

تنظیمات جداول با CSS

با استفاده از CSS میتوان به جداول هر استایل دلخواهی را بدهیم و مطابق با میل خودمان جداول را برای کاربران تنظیم کنیم. در ادامه این قسمت از آموزش CSS تنظیمات جداول را با هم بررسی می‌کنیم.

تنظیمات حاشیه جدول

در آموزش‌های HTML یاد گرفتیم که چگونه و با استفاده از چه تگ‌هایی هر جدول با تعداد سطر و ستون دلخواه را در سند قرار دهیم. برای هر سلول از جدول می‌توانیم حاشیه‌ای را با پراپرتی border قرار دهیم. ( تمام تنظیمات حاشیه در اینجا نیز قابل اجرا هستند. )

برای یادگیری بهتر، یک جدول را مانند یک ماتریس در نظر می‌گیریم. یعنی داده سطر اول ستون اول را a11 و سطر دوم ستون سوم را a23 و به همین ترتیب سطر n-ام ستون m-ام را  در نظر می‌گیریم. همان‌طور که میدانید تگ‌های <th> سلول‌های عنوان را مشخص می‌کنند و تگ‌های <td> داده‌های جدول را تعیین می‌کنند.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	div {
		color: white;
		background-color: #a0a0a0;
		float: right;
		width: 270px;
		height: 240px;
		border: 2px solid red;
		margin: 15px;
		padding: 13px;
		direction: ltr;
		overflow: hidden;
		font-size: 25px;
	}
	table, th, td {
		padding: 5px;
	}
	div.d01 {

	}
	div.d02 table.t2, th.t2, td.t2 {
		border: 1px solid blue;
	}
	div.d03 th.t3, td.t3 {
		border: 1px solid blue;
	}
	div.d04 table.t4 {
		border: 1px solid blue;
	}
	p.description {
		direction: rtl;
		color: #00ff00;
		text-decoration: none;
		text-transform: lowercase;
		word-spacing: 0;
		font-family: "Myriad عربي";
		font-style: normal;
		font-size: 22px;
		font-weight: normal;
		font-variant: normal;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d01">
 	<p class="description"> جدول زیر بدون حاشیه است. سلولها حاشیه ندارند و در نتیجه مرز مشخصی نخواهند داشت. </p>
 	<table class="t1">
 		<tr>
 			<th class="t1"> a11 </th>
 			<th class="t1"> a12 </th>
 			<th class="t1"> a13 </th>
 		</tr>
 		<tr>
 			<td class="t1"> a21 </td>
 			<td class="t1"> a22 </td>
 			<td class="t1"> a23 </td>
 		</tr>
 		<tr>
 			<td class="t1"> a31 </td>
 			<td class="t1"> a32 </td>
 			<td class="t1"> a33 </td>
 		</tr>
 	</table>
 </div>
 <div class="d02">
 	<p class="description"> در جدول زیر، برای تمام سلولها حاشیه گذاری کرده ایم. </p>
 	<table class="t2">
 		<tr>
 			<th class="t2"> a11 </th>
 			<th class="t2"> a12 </th>
 			<th class="t2"> a13 </th>
 		</tr>
 		<tr>
 			<td class="t2"> a21 </td>
 			<td class="t2"> a22 </td>
 			<td class="t2"> a23 </td>
 		</tr>
 		<tr>
 			<td class="t2"> a31 </td>
 			<td class="t2"> a32 </td>
 			<td class="t2"> a33 </td>
 		</tr>
 	</table>
 </div>
 <div class="d03">
 	<p class="description"> در جدول زیر، سلولها حاشیه گذاری کرده‌ایم و جدول حاشیه ندارد. </p>
 	<table class="t3">
 		<tr>
 			<th class="t3"> a11 </th>
 			<th class="t3"> a12 </th>
 			<th class="t3"> a13 </th>
 		</tr>
 		<tr>
 			<td class="t3"> a21 </td>
 			<td class="t3"> a22 </td>
 			<td class="t3"> a23 </td>
 		</tr>
 		<tr>
 			<td class="t3"> a31 </td>
 			<td class="t3"> a32 </td>
 			<td class="t3"> a33 </td>
 		</tr>
 	</table>
 </div>
 <div class="d04">
 	<p class="description"> در جدول زیر، فقط برای جدول حاشیه گذاری کرده ایم و سلولها حاشیه ندارند. </p>
 	<table class="t4">
 		<tr>
 			<th class="t4"> a11 </th>
 			<th class="t4"> a12 </th>
 			<th class="t4"> a13 </th>
 		</tr>
 		<tr>
 			<td class="t4"> a21 </td>
 			<td class="t4"> a22 </td>
 			<td class="t4"> a23 </td>
 		</tr>
 		<tr>
 			<td class="t4"> a31 </td>
 			<td class="t4"> a32 </td>
 			<td class="t4"> a33 </td>
 		</tr>
 	</table>
 </div>
<body>
</body>
</html>
[us_single_image image=”11105″ align=”center”]

نکته: در CSS های مثال بالا کد زیر را استفادده کرده ایم:

div.d02 table.t2, th.t2, td.t2

این نحوه انتخاب بدین معنی است که دایو با کلاس d02 را در نظر بگیر، درون این دایو جداول، td ها  و th های با کلاس t2 را انتخاب کن. تمام سلکتورها را در جلسات بعدی با هم بررسی خواهیم کرد. بعد از یادگیری سلکتورها، نیازی به کلاس دادن به تمام th و td ها نداریم. در مثال بالا برای یادگیری و فهم بهتر برای th و td ها کلاس تعیین کردیم.

ادغام حاشیه سلول‌ها

در مثال بالا دیدید که با تعیین حاشیه برای سلول‌ها، حاشیه‌ها دو خطی ایجاد می‌شود. دلیل آن این است که برای جدول، سلول‌های عنوان و سلول‌های داده حاشیه مجزا تعیین کرده‌ایم. پراپرتی border-collapse برای ادغام حاشیه هاست که باید به آن مقدار collapse بدهیم تا حاشیه‌های دو خطی به یک خط تبدیل شوند.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	table, td, th {
		border: 2px solid red;
		border-collapse: collapse;
		padding: 5px;
		color: black;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 150px;
		height: 350px;
		background-color: #ccff33;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> حاشیه ها را در جدول زیر در هم ادغام کرده ایم. </p>
  <p> توجه کنید که شماره گذاری سلول‌ها با توجه به direction تعیین شده است. در جدول زیر چون دایرکشن از راست به چپ است، a11 در سمت راست قرار دارد. یعنی شماره گذاری سلولها از سمت راست صورت گرفته است. </p>
  <table>
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
  </table>
 </div>
 <div class="d2">
  <p> اگر بخواهیم در این دایرکشن یعنی از راست به چپ نام گذاری را تغییر دهیم، یعنی از سمت چپ نام گذاری کنیم، می‌توانیم داده‌های سلول‌ها را جابجا کنیم: </p>
  <table>
 	 <tr>
 		 <th> a13 </th>
 		 <th> a12 </th>
 		 <th> a11 </th>
 	 </tr>
 	 <tr>
 		 <td> a23 </td>
 		 <td> a22 </td>
 		 <td> a21 </td>
 	 </tr>
 	 <tr>
 		 <td> a33 </td>
 		 <td> a32 </td>
 		 <td> a31 </td>
 	 </tr>
  </table>
 </div>
 <div class="d3">
  <p> اگر بخواهیم در این دایرکشن یعنی از راست به چپ نام‌گذاری را تغییر دهیم، یعنی از سمت چپ نام‌گذاری کنیم، می‌توانیم دایرکشن جدول را تغییر دهیم: </p>
  <table style="direction: ltr;">
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
  </table>
 </div>
<body>
</body>
</html>
[us_single_image image=”11106″ align=”center”]

تنظیم طول و ارتفاع جدول

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

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: blue;
	}
	table, td, th {
		border: 2px solid red;
		border-collapse: collapse;
		padding: 5px;
		color: black;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 150px;
		height: 350px;
		background-color: #ccff66;
	}
	div.d1 table {
		width: 110px;
		height: 100px;
		margin: auto;

	}
	div.d2 table {
		width: 100%;
		height: 100px;
		margin: auto;
	}
	div.d3 table {
		width: 200px;
		height: 100px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> عرض جدول زیر ۱۱۰ پیکسل است. طول و عرض را باید متناسب با اجرا دیگر تنظیم کرد. </p>
  <table>
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
  </table>
 </div>
 <div class="d2">
  <p> عرض جدول زیر ۱۰۰% است. این میزان متناسب با عرض دایو و مقدار مارجین و پَدینگ اجزا تنظیم می‌شود: </p>
  <table>
 	 <tr>
 		 <th> a13 </th>
 		 <th> a12 </th>
 		 <th> a11 </th>
 	 </tr>
 	 <tr>
 		 <td> a23 </td>
 		 <td> a22 </td>
 		 <td> a21 </td>
 	 </tr>
 	 <tr>
 		 <td> a33 </td>
 		 <td> a32 </td>
 		 <td> a31 </td>
 	 </tr>
  </table>
 </div>
 <div class="d3">
  <p> در جدول زیر، عرض مناسب تعیین نشده است و جدول از مرز دایو تجاوز کرده است: </p>
  <table style="direction: ltr;">
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
  </table>
 </div>
<body>
</body>
</html>
[us_single_image image=”11107″ align=”center”]

همانند آنچه که در excel می‌توانید برای سلول‌ها انجام دهید، برای جداول نیز می‌توانید همان تنظیمات را انجام دهید. یعنی می‌توانید متن را در وسط، بالا، پایین چپ و یا راست سلول قرار دهید. در ادامه پراپرتی های این تنظیمات را بررسی می‌کنیم.

تنظیمات عمودی داده‌ها در جداول

منظور از تنظیمات عمودی این است که داده‌های جداول را می‌توان در بالا، پایین و یا وسط  سلول‌ها قرا داد. در حالت دیفالت داده‌های <th> و <td> در وسط سلول قرار دارند. پراپرتی vertical-align برای جابجایی متن به بالا یا پایین سلول است. این پراپرتی با سه مقدار top ،  bottom و middle متن را به بالا ، پایین و یا وسط تغییر مکان می‌دهد

توجه کنید وقتی داده‌ها را در جهت عمودی جابجا می‌کنید، باید ارتفاعی مناسب را تنظیم کنید. ارتفاع td  و th ها را کم یا زیاد کنید و نتیجه را مشاهده کنید می‌بینید که اگر اندازه ارتفاع را تنظیم نکنید ( یا مقدار زیادی را انتخاب کنید ) ، حاشیه‌های جدول از دایو خارج می‌شوند چون ارتفاع آن‌ها افزایش میابد:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: #66ff33;
	}
	table, td, th {
		border: 2px solid red;
		border-collapse: collapse;
		padding: 5px;
		color: black;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 250px;
		height: 350px;
		background-color: #3399ff;
	}
	div.d1 table td {
		width: 150px;
		height: 50px;
		margin: auto;
		vertical-align: middle;

	}
	div.d2 table td {
		width: 150px;
		height: 50px;
		margin: auto;
		vertical-align: top;
	}
	div.d3 table td {
		width: 150px;
		height: 50px;
		vertical-align: bottom;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> در جدول زیر، متن‌ها در وسط سلول قرار دارند. مقدار middle برای vertical-align و دیفالت مروگر تفاوتی ندارند: </p>
  <table>
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
  </table>
 </div>
 <div class="d2">
  <p> در جدول زیر، داده‌های td را در بالای سلول قرار داده‌ایم. توجه کنید وقتی داده‌ها را در جهت عمودی جابجا می‌کنید، باید ارتفاعی مناسب را تنظیم کنید. ارتفاع td ها را زیاد کنید و نتیجه را مشاهده کنید: </p>
  <table>
 	 <tr>
 		 <th> a13 </th>
 		 <th> a12 </th>
 		 <th> a11 </th>
 	 </tr>
 	 <tr>
 		 <td> a23 </td>
 		 <td> a22 </td>
 		 <td> a21 </td>
 	 </tr>
 	 <tr>
 		 <td> a33 </td>
 		 <td> a32 </td>
 		 <td> a31 </td>
 	 </tr>
  </table>
 </div>
 <div class="d3">
  <p> در جدول زیر داده‌های سلول‌ها را در پایین سلول قرار داده‌ایم: </p>
  <table style="direction: ltr;">
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
  </table>
 </div>
 <strong>
 	<p style="color: red"> در این مثال عرض جدول را ۱۰۰% قرار دهید و نتیجه را ببینید!! </p>
 </strong>
<body>
</body>
</html>
[us_single_image image=”11108″ align=”center”]

تنظیمات افقی داده‌ها در جدول

در مثال بالا می‌بینید که بسته به دایرکشن، داده‌های <td> در سمت چپ و یا راست سلول قرار دارند. ( دایرکشن چپ به راست داده‌ها به‌صورت دیفالت سمت چپ و دایرکشن راست به چپ داده‌ها سمت راست سلول قرار می‌گیرند. ) داده‌های <th> نیز همیشه در وسط قرار دارند.

منظور از تنظیمات افقی یعنی اینکه داده‌ها را در طول سلول به سمت چپ و یا راست منتقل کنیم. پراپرتی text-align با مقادیر left ، right و center این کار را انجام می‌دهد.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: #66ff33;
	}
	table, td, th {
		border: 2px solid red;
		border-collapse: collapse;
		padding: 5px;
		color: black;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 250px;
		height: 350px;
		background-color: #3399ff;
	}
	div.d1 table td {
		width: 150px;
		height: 50px;
		margin: auto;
		vertical-align: middle;
		text-align: left;

	}
	div.d2 table td {
		width: 150px;
		height: 50px;
		margin: auto;
		vertical-align: top;
		text-align: center;
	}
	div.d3 table td {
		width: 150px;
		height: 50px;
		vertical-align: bottom;
		text-align: right;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> در جدول زیر، متن‌ها در وسط سلول و سمت چپ قرار دارند. مقدار middle برای vertical-align و دیفالت مروگر تفاوتی ندارند: </p>
  <table>
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
  </table>
 </div>
 <div class="d2">
  <p> در جدول زیر، داده‌های td را در بالای و وسط سلول قرار داده‌ایم. توجه کنید وقتی داده‌ها را در جهت عمودی جابجا می‌کنید، باید ارتفاعی مناسب را تنظیم کنید. ارتفاع td ها را زیاد کنید و نتیجه را مشاهده کنید: </p>
  <table>
 	 <tr>
 		 <th> a13 </th>
 		 <th> a12 </th>
 		 <th> a11 </th>
 	 </tr>
 	 <tr>
 		 <td> a23 </td>
 		 <td> a22 </td>
 		 <td> a21 </td>
 	 </tr>
 	 <tr>
 		 <td> a33 </td>
 		 <td> a32 </td>
 		 <td> a31 </td>
 	 </tr>
  </table>
 </div>
 <div class="d3">
  <p> در جدول زیر داده‌های سلول‌ها را در پایین و سمت راست سلول قرار داده‌ایم: </p>
  <table style="direction: ltr;">
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
  </table>
 </div>
 <strong style="color: red">
 	<p> در این مثال عرض جدول را ۱۰۰% قرار دهید و نتیجه را ببینید!! <br>
 	جابجایی افقی را با توجه به دایرکشن انجام دهید. </p>
 </strong>
<body>
</body>
</html>
[us_single_image image=”11109″ align=”center”]

برای داده‌های td و th می‌توان پَدینگ مناسبی را با پراپرتی padding سِت کرد که در مثال‌های بالا از این پراپرتی استفاده شد.

توجه کنید که حاشیه را می‌توان در هر سمت سلول‌ها قرارداد.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: #66ff33;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 200px;
		height: 250px;
		background-color: #3399ff;
	}
	table, td, th {
		width: 100px;
		height: 15px;
		margin: auto;
		padding: 5px;
		vertical-align: middle;
		text-align: center;
		color: black;
		border-collapse: collapse;
	}
	th.t1, td.t1 {
		border-bottom: 2px solid #fff;
		border-right: none;
		border-top: none;
		border-left: none;
	}
	th.t2, td.t2 {
		border-right: 2px solid #fff;
		border-bottom: none;
		border-top: none;
		border-left: none;
	}
	th.t3, td.t3 {
		border-top: 2px solid #fff;
		border-bottom: none;
		border-right: none;
		border-left: none;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> در جدول زیر حاشیه در سمت پایین سلول‌ها قرار دارد: </p>
  <table class="t1">
 	 <tr>
 		 <th class="t1"> a11 </th>
 		 <th class="t1"> a12 </th>
 		 <th class="t1"> a13 </th>
 	 </tr>
 	 <tr>
 		 <td class="t1"> a21 </td>
 		 <td class="t1"> a22 </td>
 		 <td class="t1"> a23 </td>
 	 </tr>
 	 <tr>
 		 <td class="t1"> a31 </td>
 		 <td class="t1"> a32 </td>
 		 <td class="t1"> a33 </td>
 	 </tr>
  </table>
 </div>
 <div class="d2">
  <p> در جدول زیر حاشیه در سمت راست سلولها قرار دارد: </p>
  <table class="t2">
 	 <tr>
 		 <th class="t2"> a13 </th>
 		 <th class="t2"> a12 </th>
 		 <th class="t2"> a11 </th>
 	 </tr>
 	 <tr>
 		 <td class="t2"> a23 </td>
 		 <td class="t2"> a22 </td>
 		 <td class="t2"> a21 </td>
 	 </tr>
 	 <tr>
 		 <td class="t2"> a33 </td>
 		 <td class="t2"> a32 </td>
 		 <td class="t2"> a31 </td>
 	 </tr>
  </table>
 </div>
 <div class="d3">
  <p> در جدول زیر حاشیه در سمت بالا سلولها قرار دارد: </p>
  <table class="t3" style="direction: ltr;">
 	 <tr>
 		 <th class="t3"> a11 </th>
 		 <th class="t3"> a12 </th>
 		 <th class="t3"> a13 </th>
 	 </tr>
 	 <tr>
 		 <td class="t3"> a21 </td>
 		 <td class="t3"> a22 </td>
 		 <td class="t3"> a23 </td>
 	 </tr>
 	 <tr>
 		 <td class="t3"> a31 </td>
 		 <td class="t3"> a32 </td>
 		 <td class="t3"> a33 </td>
 	 </tr>
  </table>
 </div>
<body>
</body>
</html>
[us_single_image image=”11132″ align=”center”]

Hoverable کردن جداول

منظور از hover این است که وقتی نشانگر موس روی جزئی که hoverable است ( یعنی تنظیمات hover برای آن انجام شده است ) قرار بگیرد، تغییراتی ظاهر شود. این ویژگی را در لینک‌ها با هم دیده‌ایم. حال برای هاورِیبل کردن جدول به این ترتیب عمل می‌کنیم که با یک سلکتور سطرها یا ستون‌ها را انتخاب می‌کنیم و ویژگی دلخواه را به آن می‌دهیم. مثلا برای هاوِرِیبل کردن سطرها این‌گونه سطرها را انتخاب می‌کنیم:

Hoverable کردن جداول

منظور از hover این است که وقتی نشانگر موس روی جزئی که hoverable است ( یعنی تنظیمات hover برای آن انجام شده است ) قرار بگیرد، تغییراتی ظاهر شود. این ویژگی را در لینک‌ها با هم دیده‌ایم. حال برای هاورِیبل کردن جدول به این ترتیب عمل می‌کنیم که با یک سلکتور سطرها یا ستون‌ها را انتخاب می‌کنیم و ویژگی دلخواه را به آن می‌دهیم. مثلا برای هاوِرِیبل کردن سطرها این‌گونه سطرها را انتخاب می‌کنیم:

{ tr:hover { css rules

توجه: با انواع سلکتورها در جلسات بعدی آشنا می‌شویم.

توجه: با انواع سلکتورها در جلسات بعدی آشنا می‌شویم.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: #66ff33;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 200px;
		height: 250px;
		background-color: #3399ff;
	}
	table, td, th {
		width: 100px;
		height: 15px;
		margin: auto;
		padding: 5px;
		vertical-align: middle;
		text-align: center;
		color: black;
		border-collapse: collapse;
	}
	th.t1, td.t1 {
		border-bottom: 2px solid #fff;
		border-right: none;
		border-top: none;
		border-left: none;
	}
	tr.t1:hover {
		background-color: #c8c8c8;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> در جدول زیر حاشیه در سمت پایین سلولها قرار دارد. </p>
  <p> نشانگر موس را روس سطرها جابجا کنید: </p>
  <table class="t1">
 	 <tr class="t1">
 		 <th class="t1"> a11 </th>
 		 <th class="t1"> a12 </th>
 		 <th class="t1"> a13 </th>
 	 </tr>
 	 <tr class="t1">
 		 <td class="t1"> a21 </td>
 		 <td class="t1"> a22 </td>
 		 <td class="t1"> a23 </td>
 	 </tr>
 	 <tr class="t1">
 		 <td class="t1"> a31 </td>
 		 <td class="t1"> a32 </td>
 		 <td class="t1"> a33 </td>
 	 </tr>
  </table>
 </div>
</body>
</html>
[us_single_image image=”11138″ align=”center”]

تغییر رنگ سطرها

میتوان رنگ سطرهای هر جدول را به رنگ دلخواه تغییر داد و جدولی راه‌راه را ایجاد کرد. برای این کار باید از سلکتور فرزند استفاده کنیم.

nth-child() سلکتور فرزند است که درون پرانتز می‌توان بچه‌های زوج (  even) و یا فرد ( odd ) را با آن انتخاب کرد.  جزئیات کامل این سلکتور را در جلسات بعدی خواهیم دید. به‌عنوان مثال :

tr:nth-child(odd) { 
		background-color: #ffcc66;
	}

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

وقتی‌که فرزند را انتخاب کردیم، باید رنگ دلخواه را برای زمینه آن فرزندان سِت کنیم.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: #66ff33;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 300px;
		height: 250px;
		background-color: #3399ff;
	}
	table, td, th {
		width: 250px;
		height: 15px;
		margin: auto;
		padding: 1px;
		vertical-align: middle;
		text-align: center;
		color: black;
		border-collapse: collapse;
	}
	tr:nth-child(odd) { 
		background-color: #ffcc66;
	}
	tr:nth-child(even) {
		background-color: #ffff66;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> در جدول زیر از سلکتور فرزند برای راه‌راه کردن جدول استفاده‌شده است: </p>
  <table>
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
 	 <tr>
 	 	<td> a41 </td>
 	 	<td> a42 </td>
 	 	<td> a43 </td>
 	 </tr>
 	 <tr>
 	 	<td> a51 </td>
 	 	<td> a52 </td>
 	 	<td> a53 </td>
 	 </tr>
 	 <tr>
 	 	<td> a61 </td>
 	 	<td> a62 </td>
 	 	<td> a63 </td>
 	 </tr>
 	 <tr>
 	 	<td> a71 </td>
 	 	<td> a72 </td>
 	 	<td> a73 </td>
 	 </tr>
  </table>
 </div>
</body>
</html>
[us_single_image image=”11133″ align=”center”]

پراپرتی background-color و color برای به ترتیب رنگ زمینه و رنگ متن سلول‌ها به کار می‌روند.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: #66ff33;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 300px;
		height: 250px;
		background-color: #3399ff;
	}
	table, td, th {
		width: 250px;
		height: 15px;
		margin: auto;
		padding: 1px;
		vertical-align: middle;
		text-align: center;
		color: black;
		border-collapse: collapse;
	}
	tr:nth-child(odd) { 
		background-color: #ffcc66;
	}
	tr:nth-child(even) {
		background-color: #ffff66;
	}
	th {
		background-color: purple;
		color: white;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> در جدول زیر از سلکتور فرزند برای راه‌راه کردن جدول استفاده شده است: </p>
  <table>
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
 	 <tr>
 	 	<td> a41 </td>
 	 	<td> a42 </td>
 	 	<td> a43 </td>
 	 </tr>
 	 <tr>
 	 	<td> a51 </td>
 	 	<td> a52 </td>
 	 	<td> a53 </td>
 	 </tr>
 	 <tr>
 	 	<td> a61 </td>
 	 	<td> a62 </td>
 	 	<td> a63 </td>
 	 </tr>
 	 <tr>
 	 	<td> a71 </td>
 	 	<td> a72 </td>
 	 	<td> a73 </td>
 	 </tr>
  </table>
 </div>
</body>
</html>
[us_single_image image=”11134″ align=”center”]

رسپانسیو کردن جدول

جداول را می‌توان به‌صورت رسپانسیو طراحی کرد. برای این کار باید کل <table> را درون یک جزء مثلا یک div قرار داد و برای آن جزء پراپرتی overflow-x:auto را سِت کرد؛ اگر همراه overflow حرف x بیاید یعنی محتوای اضافه در عرض صفحه را scroll کن و اگر حرف y همراه آن بیاید یعنی محتوای اضافه در راستای محور y را scroll کن که در این صورت یک scrollbar برای چپ یا راست و بالا یا پایین کردن جدول ایجاد می‌شود. اگر تعداد سطرها زیاد باشد باید حرف y و اگر تعداد ستون‌ها زیاد باشد باید حرف x را همراه با overflow استفاده کنید. ( با پراپرتی overflow و کاربرد آن در جلسات بعد آشنا می‌شویم )

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: #66ff33;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 300px;
		height: 250px;
		background-color: #3399ff;
		overflow-y: auto;
	}
	table, td, th {
		width: 250px;
		height: 15px;
		margin: auto;
		padding: 1px;
		vertical-align: middle;
		text-align: center;
		color: black;
		border-collapse: collapse;
	}
	tr:nth-child(odd) { 
		background-color: #ffcc66;
	}
	tr:nth-child(even) {
		background-color: #ffff66;
	}
	th {
		background-color: purple;
		color: white;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> برای مشاهده تمام سلولها باید scrollbar را پایین و یا بالا کنید. در این مثال برای رسپانسیو شدن جدول از پراپرتی overflow-y: auto;
 برای دایو استفاده کرده‌ایم: </p>
  <table>
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
 	 <tr>
 	 	<td> a41 </td>
 	 	<td> a42 </td>
 	 	<td> a43 </td>
 	 </tr>
 	 <tr>
 	 	<td> a51 </td>
 	 	<td> a52 </td>
 	 	<td> a53 </td>
 	 </tr>
 	 <tr>
 	 	<td> a61 </td>
 	 	<td> a62 </td>
 	 	<td> a63 </td>
 	 </tr>
 	 <tr>
 	 	<td> a71 </td>
 	 	<td> a72 </td>
 	 	<td> a73 </td>
 	 </tr>
 	 <tr>
 		 <td> a81 </td>
 		 <td> a82 </td>
 		 <td> a83 </td>
 	 </tr>
 	 <tr>
 		 <td> a91 </td>
 		 <td> a92 </td>
 		 <td> a93 </td>
 	 </tr>
 	 <tr>
 		 <td> a10.1 </td>
 		 <td> a10.2 </td>
 		 <td> a10.3 </td>
 	 </tr>
 	 <tr>
 	 	<td> a11.1 </td>
 	 	<td> a11.2 </td>
 	 	<td> a11.3 </td>
 	 </tr>
 	 <tr>
 	 	<td> a12.1 </td>
 	 	<td> a12.2 </td>
 	 	<td> a12.3 </td>
 	 </tr>
 	 <tr>
 	 	<td> a13.1 </td>
 	 	<td> a13.2 </td>
 	 	<td> a13.3 </td>
 	 </tr>
 	 <tr>
 	 	<td> a14.1 </td>
 	 	<td> a14.2 </td>
 	 	<td> a14.3 </td>
 	 </tr>
  </table>
 </div>
</body>
</html>
[us_single_image image=”11135″ align=”center”]

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

با استفاده از تگ <caption> که دقیقا بعد از تگ <table> می‌آید، می‌توان عنوانی را برای جدول تعیین که و با انتخاب caption و استفاده از پراپرتی caption-side عنوان را در بالا ( top ) و یا در پایین ( bottom ) جدول قرار داد.

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	 	color: #66ff33;
	}
	div {
		border: 2px solid purple;
		float: right;
		padding: 5px;
		margin: 10px;
		width: 300px;
		height: 250px;
		background-color: #3399ff;
		overflow-y: auto;
	}
	table, td, th {
		width: 250px;
		height: 15px;
		margin: auto;
		padding: 1px;
		vertical-align: middle;
		text-align: center;
		color: black;
		border-collapse: collapse;
	}
	tr:nth-child(odd) { 
		background-color: #ffcc66;
	}
	tr:nth-child(even) {
		background-color: #ffff66;
	}
	th {
		background-color: purple;
		color: white;
	}
	caption {
		caption-side: bottom;
		color: purple;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d1">
  <p> برای مشاهده تمام سلولها باید scrollbar را پایین و یا بالا کنید. در این مثال برای رسپانسیو شدن جدول از پراپرتی overflow-y: auto;
 برای دایو استفاده کرده‌ایم: </p>
  <table>
   <caption> این عنوان جدول است </caption>
 	 <tr>
 		 <th> a11 </th>
 		 <th> a12 </th>
 		 <th> a13 </th>
 	 </tr>
 	 <tr>
 		 <td> a21 </td>
 		 <td> a22 </td>
 		 <td> a23 </td>
 	 </tr>
 	 <tr>
 		 <td> a31 </td>
 		 <td> a32 </td>
 		 <td> a33 </td>
 	 </tr>
 	 <tr>
 	 	<td> a41 </td>
 	 	<td> a42 </td>
 	 	<td> a43 </td>
 	 </tr>
 	 <tr>
 	 	<td> a51 </td>
 	 	<td> a52 </td>
 	 	<td> a53 </td>
 	 </tr>
  </table>
 </div>
</body>
</html>
[us_single_image image=”11136″ align=”center”]

نوشته های مرتبط

دیدگاه ‏خود را بنویسید