طراحی وب سایت قدرتمند، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

استایل دهی پیوند ها، لیست ها و جداول با CSS

استایل دهی پیوند ها، لیست ها و جداول با CSS

دوستان عزیز سلام. امروز هم با جلسه ای دیگر از آموزش CSS در خدمت شما همراهان گرامی هستیم. و اما موضوع مطالب این بخش عبارت است از:

  • استایل دهی به پیوندها با CSS
  • استایل دهی به لیست ها با CSS
  • استایل دهی به جداول با CSS

دوستان عزیز، مطالب ارائه شده در این بخش در هر پروژه ی طراحی سایت کاربرد دارند. پس با دقت و حوصله به مطالعه مطالب بپردازید:

استایل دهی پیوندها با CSS

در جلسه ششم آموزش HTML آموختیم که با استفاده از تگ <a>  پیوند ها را ایجاد و کاربران را به صفحاتی از سایت و یا وب سایتی دیگر هدایت می کنیم. حال می خواهیم ببینیم که با چه دستوراتی و چگونه می توان لینک ها را سبک دهی کرد:

لینک ها با استفاده از سه ویژگی color ، font-family  و background  سبک دهی می شوند. به این ترتیب خواهیم توانست رنگ و فونت و زمینه لینک ها را به دلخواه تغییر دهیم و به زیبایی آن بیفزاییم.

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

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

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

CSS این امکان را به ما می دهد که سبک پیوند را در هر 4 حالت به گونه ای که می خواهیم تغییر دهیم که برای این کار دستوراتی با الگوی زیر را خواهیم داشت:

a:state { CSS rules };

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

a:link : این دستور، سبک های پیوند قبل از بازدید و کلیک را بیان می کند.

a:visited : سبک های پیوند بعد از کلیک با این دستور تنظیم می شوند.

a:hover : با استفاده از این دستور، رفتار پیوند در زمانی که نشانگر موس روی آن قرار دارد را تعریف می کنیم.

a:active : این دستور نیز سبک های پیوند را هنگام فشار دادن دکمه موس، تغییر می دهد.

در جلسه هشتم آموزش CSS با جزئیات بیشتر حالات مختلف یک لینک آشنا خواهیم شد. (و به حقایقی در مورد آن پی می بریم!!)

حال بیایید یک مثال را با هم بررسی کنیم:

<!-- 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="https://www.sitesazan.net" target="_blank"> سایت سازان </a>
</body>
</html>

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

خب حالا دستورات CSS زیر را برای سبک دهی به لینک، در فایل خارجی نوشته و به سند HTML لینک می دهیم:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	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="https://www.sitesazan.net" target="_blank"> سایت سازان </a>
</body>
</html>

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

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

در سبک دهی به پیوند ها باید ترتیب زیر رعایت شود:

  • ابتدا حالت a:link  را تعیین کنید.
  • مرحله دوم باید حالت a:visited  را تنظیم کنید.
  • a:hover  در مرحله سوم تعیین می شود
  • در آخر نیز a:active  تنظیم می شود.

در ادامه دستورات مهم دیگه رو معرفی می کنم:

text-decoration

در هر حالتی از پیوند می توان با استفاده از این ویژگی، متن پیوند را آرایش کرد:

/*style.css*/
body {
	 	direction: rtl;
	 	font-family: "iran sans";
	 	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>نشانگر را بر روی لینک قرار دهید، کلیک کنید و کلیک را نگه دارید. در هر مرحله می بینید که رنگ لینک تغییر میابد: </p>
 <a href="https://www.sitesazan.net" target="_blank"> سایت سازان </a>
 <p> <strong> نکته مهم: </strong> وقتی که تنظیمات حالات لینکها را انجام می دهید باید ترتیب زیر را رعایت کنید: <br>
  1-	ابتدا حالت a:link را تعیین کنید. <br>
  2-	مرحله دوم باید حالت a:visited را تنظیم کنید. <br>
  3-	a:hover در مرحله سوم تنظیم می شود. <br>
  4-	در آخر نیز a:active تنظیم می شود.
 </p>
</body>
</html>

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

background-color

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

/*style.css*/
body { 
        direction: rtl; 
        font-family: "iran sans";
        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>نشانگر را بر روی لینک قرار دهید، کلیک کنید و کلیک را نگه دارید. در هر مرحله می بینید که رنگ لینک تغییر میابد: </p>
 <a href="https://www.sitesazan.net" target="_blank"> سایت سازان </a>
</body>
</html>

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

حالا که با این دستورات آشنا شدیم، می خواهیم یک مثال را بررسی کنیم تا ببینیم چگونه می توانیم لینک را به دکمه ای زیبا تبدیل کنیم؟

دستورات مثال زیر را با دقت بررسی کنید:

 /*style.css*/
body { 
        direction: rtl; 
        font-family: "iran sans";
        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="https://www.sitesazan.net" target="_blank"> سایت سازان </a>
</body>
</html>

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

بدین ترتیب می توان با استفاده از این دستورات لینک ها را زیبا سازی کرد. همانطور که گفتم بعد از سبک دهی به لینک ها، سبک دهی به لیست ها را خواهیم آموخت:

استایل دهی به لیست ها با CSS

با لیست ها در جلسه هشتم آموزش HTML آشنا شدیم و انواع آن را با هم بررسی کردیم. در ادامه خواهیم دید که چگونه به لیست های مرتب و نامرتب، سبک دهی می کنیم.

اولین دستوری که با آن آشنا می شویم دستوری برای تغییر نحوه علامت گذاری (بولت ها) موارد یک لیست می باشد:

list-style-type

همانطور که می دانید مرورگر ها موارد یک لیست را با دایره ای تو پر نشانه گذاری می کنند. در مثال زیر می بینید که با این دستور چه علامت هایی را برای نشانه گذاری موارد یک لیست استفاده کرد:

/*style.css*/
body {
	 	font-family: "iran sans";
	 	color: blue;
	}
	div {
		color: white;
		background-color: #a0a0a0;
		float: left;
		width: 150px;
		height: 200px;
		border: 2px solid red;
		margin: 15px;
		padding: 13px;
		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 {
		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">First list</p>
 	<ul class="ul01">
 		<li> Item 1 </li>
 		<li> Item 2 </li>
 	</ul>
 </div>
 <div class="d02">
 	<p class="description">Second list</p>
 	<ul class="ul02">
 		<li> Item 1 </li>
 		<li> Item 2 </li>
 	</ul>
 </div>
 <div class="d03">
 	<p class="description">Third list</p>
 	<ol class="ol01">
 		<li> Item 1 </li>
 		<li> Item 2 </li>
 	</ol>
 	<ol class="ol02">
 		<li> Item 1 </li>
 		<li> Item 2 </li>
 	</ol>
 </div>
 <div class="d04">
 	<p class="description">Fourth list</p>
 	<ol class="ol03">
 		<li> Item 1 </li>
 		<li> Item 2 </li>
 	</ol>
 	<ol class="ol04">
 		<li> Item 1 </li>
 		<li> Item 2 </li>
 	</ol>
 </div>
<body>
</body>
</html>

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

list-style-image

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

/*style.css*/
body {
        font-family: "iran sans";
        color: blue;
    }
    div {
        color: white;
        background-color: #a0a0a0;
        float: left;
        width: 200px;
        height: 180px;
        border: 2px solid red;
        margin: 15px;
        padding: 13px;
        overflow: hidden;
    }
    ul.ul01 {
        list-style-image: url( images/markerimg.jpg );
    }
    ul.ul02 {
        list-style-image: url( images/markerimg2.jpg );
    }
    p.description {
        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">first list</p>
    <ul class="ul01">
        <li> Item 1 </li>
        <li> Item 2 </li>
    </ul>
 </div>
 <div class="d02">
    <p class="description">Second list</p>
    <ul class="ul02">
        <li> Item 1 </li>
        <li> Item 2 </li>
    </ul>
 </div>
<body>
</body>
</html>

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

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

list-style-position

این دستور برای تعیین محل نشانه (شماره یا بولت و یا عکس) موارد یک لیست استفاده می شود که دو مقدار inside  و outside  را دریافت می کند:

/*style.css*/
body { 
        font-family: "iran sans";
        color: blue;
    }
    div {
        color: white;
        background-color: #a0a0a0;
        float: left;
        width: 270px;
        min-height: 240px;
        border: 2px solid red;
        margin: 15px;
        padding: 8px;
        overflow: hidden;
    }
    ul.ul11 {
        list-style-position: inside;
    }
    ul.ul12 {
        list-style-position: outside;
    }
    ol.ol21 {
        list-style-position: inside;
    }
    ol.ol31 {
        list-style-position: outside;
    }
    p.description {
        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">first div</p>
    <ul class="ul11">
        <li> Item 1 </li>
        <li> Item 2 </li>
        <li> Item 3 </li>
        <li> Item 4 </li>
    </ul>
    <ul class="ul12">
        <li> Item 1 </li>
        <li> Item 2 </li>
        <li> Item 3 </li>
        <li> Item 4 </li>
    </ul>
 </div>
 <div class="d02">
    <p class="description">second div</p>
    <ol class="ol21">
        <li> Lorem ipsum dolor sit amet, consectetur adipisicing elit </li>
        <li> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        <li> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        <li> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    </ol>
 </div>
 <div class="d03">
  <p class="description">third div</p>
    <ol class="ol31">
        <li> Lorem ipsum dolor sit amet, consectetur adipisicing elit </li>
        <li> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        <li> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        <li> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    </ol>
 </div>
<body>
</body>
</html>

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

list-style

این دستور، 3 دستور گفته شده برای سبک دهی به لیست ها را در یک دستور خلاصه می کند. پس سه مقدار را دریافت می کند که به ترتیب زیر خواهند بود:

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

خب اگر فرضا یکی از موارد بالا تنظیم نشود چه اتفاقی رخ می دهد؟

پاسخ این است که درصورت عدم تعیین مقدار برای هر کدام از موارد بالا، مرورگر مقدار پیش فرض را برای آن در نظر می گیرد.

خب دوستان، اگر توجه کرده باشید مقدار اول دستور list-style  نوع نشانه گذاری و مقدار سوم عکسی را برای نشانه گذاری موارد تنظیم می کند!!!

حالا یک سوال از شما دارم، آیا این امکان دارد که هم عکس و هم علامتی را برای نشانه گذاری موارد لیست استفاده کرد؟؟؟
لطفا کمی فکر کنید و بعد ادامه مطلب را مطالعه کنید.

مرورگر در ابتدا عکس را برای نشانه گذاری استفاده می کند. اما ممکن است عکس به هر دلیلی بارگذاری نشود که در این صورت اگر type  را برای نشانه گذاری تنظیم نکنیم، موارد لیست بدون نشانه باقی می مانند.

پس اگر بخواهیم برای نشانه گذاری موارد یک لیست از عکس استفاده کنیم، باید نوع نشانه گذاری را هم تنظیم کنیم.

         رنگ زمینه لیست ها

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

/*style.css*/
body {
        font-family: "iran sans";
    }
    ul {
        border: 2px solid purple;
        padding: 25px;
        width: 120px;
        float: left;
        margin: 10px;
        list-style-type: square;

    }
    ul.ul1 {
        background-color: #cc33ff;
    }

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

    ul.ul3 {
        background-color: #cc33ff;
    }
    ul.ul3 li {
        background-color: #ff99ff;
    }
<!-- 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>
 <ul class="ul1">
 	<li> Item 1 </li>
 	<li> Item 2 </li>
 	<li> Item 3 </li>
 </ul>
 <ul class="ul2">
 	<li> Item 1 </li>
 	<li> Item 2 </li>
 	<li> Item 3 </li>
 </ul>
 <ul class="ul3">
 	<li> Item 1 </li>
 	<li> Item 2 </li>
 	<li> Item 3 </li>
 </ul>
<body>
</body>
</html>

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

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

/*style.css*/
body {
        font-family: "iran sans";
        color: blue;
    }
    ul {
        border: 2px solid purple;
        padding: 5px;
        width: 250px;
        float: left;
        margin: 10px;
        list-style-type: square;

    }
    ol {
        border: 2px solid green;
        padding: 25px;
        width: 250px;
        float: left;
        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>
 <ul class="ul1">
 	<li> Item 1 </li>
 	<li> Item 2 </li>
 	<li> Item 3 </li>
 </ul>
 <ol class="ol1">
 	<li> Item 1 </li>
 	<li> Item 2 </li>
 	<li> Item 3 </li>
 </ol>
<body>
</body>
</html>

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

حال به سراغ آخرین مبحث این بخش، یعنی سبک دهی به جداول میرویم.

استایل دهی به جداول با CSS

در جلسه هفتم آموزش HTML با طراحی جداول آشنا شدیم. حال می خواهیم ببینیم با چه دستوراتی از CSS می توان جداول را سبک دهی کرد. همراه من باشید.

حاشیه گذاری جداول

در مثال زیر نحوه حاشیه گذاری جدول و سلول های آن را می بینیم که برای فهم بهتر، یک جدول را مانند یک ماتریس در نظر می گیریم. یعنی داده سطر اول ستون اول را a11 و سطر دوم ستون سوم را a23 و به همین ترتیب سطر n-ام ستون m-ام را  در نظر می گیریم.

همانطور که می دانید تگ های <th>  سلول های عنوان را مشخص می کنند و تگ های <td>  داده های جدول را تعیین می کنند.

/*style.css*/
body { 
        direction: rtl; 
        font-family: "iran sans";
        color: blue;
    }
    div {
        color: white;
        background-color: #a0a0a0;
        float: right;
        width: 270px;
        height: 300px;
        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-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>

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

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

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

و این یعنی المان های <table>  و <th>  و <td>  درون دیوی که کلاس d02 دارد انتخاب شوند. در جلسه نهم آموزش CSS انتخاب کننده ها به تفصیل بررسی خواهند شد.

border-collapse

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

/*style.css*/
body { 
        direction: rtl; 
        font-family: "iran sans";
        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: 250px;
        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>

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

طول و ارتفاع جدول

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

/*style.css*/
body { 
        direction: rtl; 
        font-family: "iran sans";
        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: 250px;
        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> عرض جدول زیر 110 پیکسل است. طول و عرض را باید متناسب با اجرا دیگر تنظیم کرد. </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> عرض جدول زیر 100% است. این می زان متناسب با عرض دایو و مقدار مارجین و پَدینگ اجزا تنظیم می شود: </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>

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

در نرم افزار آفیس و هنگام کار با جداول، می توان داده های جدول را درون سلول ها جابجا کرد. یعنی آنها را در بالا، پایین و یا وسط قرار داد. یعنی در راستای عمود آنها را جابجا کرد. همچنین می توان داده ها را در عرض سلول جابجا کرد. در CSS نیز با استفاده از دستوراتی که در ادامه معرفی می شوند می توان داده های درون سلول ها را جابجا کرد.

تراز داده های یک سلول

برای جابجایی داده های سلول های یک جدول در راستای عمودی از ویژگی vertical-align  استفاده می کنیم. این ویژگی با سه مقدار top  ،  bottom  و middle  داده ها را در بالا ، پایین و یا وسط سلول قرار می دهد.

همچنین اگر بخواهیم داده ها را در عرض سلول جابجا کنیم از ویژگی text-align  با مقادیر left ، right  و center  استفاده می کنیم.

  • مکان داده ها در عرض سلول، به مقدار ویژگی direction  بستگی دارد. یعنی اگر direction: rtl  باشد، داده ها در سمت راست قرار خواهند داشت و اگر جهت چپ به راست باشد داده ها در سمت چپ قرار می گیرند.
  • داده های <th>  به صورت پیش فرض در وسط سلول قرار می گیرند.

در مثال زیر داده های سلول ها را با استفاده از ویژگی های گفته شده تراز کنید:

/*style.css*/
body {
        font-family: "iran sans";
        color: #66ff33;
    }
table, td, th {
        border: 2px solid red;
        border-collapse: collapse;
        padding: 5px;
        color: black;
    }
table {
    width: 100%;
    height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>Page title</title>
</head>
<body>
 <table>
 	<tr>
 		<th>a11</th>
 		<td>a12</td>
 		<td>a13</td>
 		<td>a14</td>
 	</tr>
 	<tr>
 		<th>a21</th>
 		<td>a22</td>
 		<td>a23</td>
 		<td>a24</td>
 	</tr>
 	<tr>
 		<th>a31</th>
 		<td>a32</td>
 		<td>a33</td>
 		<td>a34</td>
 	</tr>
 </table>
</body>
</html>

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

در مثال زیر می بینید که چگونه می توان یک لبه از سلول ها را حاشیه گذاری کرد:

/*style.css*/
body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	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>

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

جداول با قابلیت hover

مطمئنا در سایت های مختلف جداولی را دیده اید که با حرکت نشانگر موس روی ردیف ها، هایلایت می شوند و رنگ زمینه آنها تغییر میابد. در CSS انتخاب کننده :hover  برای سبک دهی به المان ها در زمان حرکت نشانگر موس روی آنها استفاده می شود. به عنوان مثال برای دادن سبک خاص به یک ردیف در هنگام حرکت موس روی آن الگوی زیر را داریم:

tr:hover { css rules }

حال بیایید مثالی را با هم بررسی کنیم:

/*style.css*/
body {
    font-family: "iran sans";
}
table, th, td {
    border-bottom: 1px solid gray;
    border-collapse: collapse;

}
table {
    width: 100%;
}
th, td {
    text-align: center;
}
tr:hover {
 background-color: #aaaaaa;
}
<!-- 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>
  <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>
</body>
</html>

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

در مثال بالا با حرکت موس روی <tr>  ها، رنگ زمینه آنها تغییر میابد. ضمنا حرکت موس روی المان ها را hover over می گوییم.

جداول راه راه

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

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

tr:nth-child(odd)

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

/*style.css*/
body {
    font-family: "iran sans";
}
table, td {
    border-bottom: 1px solid gray;
    border-collapse: collapse;

}
table {
    width: 100%;
}
td {
    text-align: center;
}
tr:nth-child(odd) {
 background-color: #aaaaaa;
}
<!-- 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>
  <table>
 	 <tr>
 		 <td> a11 </td>
 		 <td> a12 </td>
 		 <td> a13 </td>
 	 </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>
</body>
</html>

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

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

جداول را می توان به صورت رسپانسیو طراحی کرد. برای این کار باید کل <table>  را درون یک المان مثلا یک div قرار داد و برای آن المان ویژگی overflow-x:auto  را تنظیم کرد؛

اگر همراه overflow  حرف x بیاید یعنی محتوای اضافه در عرض صفحه را scroll کن و اگر حرف y همراه آن بیاید یعنی محتوای اضافه در راستای محور y را scroll کن که در این صورت یک scrollbar برای چپ یا راست و بالا یا پایین کردن جدول ایجاد می شود. اگر تعداد سطرها زیاد باشد باید حرف y و اگر تعداد ستون ها زیاد باشد باید حرف x را همراه با overflow  استفاده کنید. (با ویژگی overflow  و کاربرد آن در جلسه هشتم آموزش CSS آشنا می شویم).

/*style.css*/
body { 
        direction: rtl; 
        font-family: "iran sans";
        color: #66ff33;
    }
    div {
        border: 2px solid purple;
        float: right;
        padding: 5px;
        margin: 10px;
        width: 100%;
        height: 250px;
        background-color: #3399ff;
        overflow-y: auto;
    }
    table, td, th {
        margin: auto;
        padding: 1px;
        vertical-align: middle;
        text-align: center;
        color: black;
        border-collapse: collapse;
    }
    table {
        width: 100%;
        height: auto;
        margin-bottom: 3px;
    }
    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>

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

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

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

/*style.css*/
body { 
        direction: rtl; 
        font-family: "iran sans";
        color: #66ff33;
    }
    div {
        border: 2px solid purple;
        float: right;
        padding: 5px;
        margin: 10px;
        width: 100%;
        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">
  <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>

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

در اینجا این بخش از آموزش CSS را به پایان می رسانم. حال نوبت شما دوستان است که به بحث و تبادل نظر با در مورد مطالب این بخش بپردازید و  نکات تکمیلی را با سایر کاربران به اشتراک بگذارید.

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

پیروز و سربلند باشید.

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