دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » خاصیت Display و استایل دادن به جدول ( Table ) در فیلم آموزش CSS
خاصیت Display و استایل دادن به جدول ( Table ) در فیلم آموزش CSS

خاصیت Display و استایل دادن به جدول ( Table ) در فیلم آموزش CSS

در این قسمت از فیلم آموزش CSS ، خاصیت display و نحوه استایل دادن به table ( جدول ) آموزش داده شده است هم چنین نحوه مخفی کردن عنصر در CSS را نیز آموزش داده ایم .

استایل دادن به Table

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

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>
		<link rel="stylesheet" type="text/css" href="style.css" />

	</head>
	<body>
	
		<table> 
			<tbody>
				<tr>
					<th>Name</th>
					<th> Last Name</th>
					<th>Phone Number</th>
				</tr>
				<tr>
					<td>Reza</td>
					<td>Toumari</td>
					<td>0555555</td>
				</tr>
				<tr>
					<td>Kamal</td>
					<td>Heidari</td>
					<td>090000</td>
				</tr>
			</tbody>
		</table>
				
	</body>
</html>

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

سورس کد CSS : 

table{
	width: 900px;
	height: 400px;
}
table , td , th{
	border: 1px #000 solid;
}
tr:hover{
	background: green;
}
td{
	vertical-align: top;
}

نکته مهمی که باید به اون دقت کنید این است که برای استایل دادن به صورت هم زمان به چندین تگ یا کلاس باید اون هارو با استفاه از کاما ( , ) از هم جدا کنید . 

خاصیت Display در CSS

اول ببینیم Display یعنی چی ؟؟؟ Display به معنی نمایش دادن است . Display در برای تنظیم نحوه نمایش عناصر کاربرد دارد که مقادیر مختلفی را نیز می پذیرد مانند : block ، table ،  inline-block ، none و …

همان طور که در HTML هم گفته ام عناصر یا به صورت inline level هستند یا به صورت block level هستند ، حالا ما می تونیم با استفاده از خاصیت display نحوه نمایش این عناصر رو عوض کنیم .

display : block

مثلاً تگ Span چون به صورت خطی هستند حالا با استفاده از دستور Display می تونیم  اون رو به صورت block level در بیاوریم .

span{
	display: block;
}

display : inline

inline باعث می شود عناصر ما در یک خط باشند .

div{
	display: inline;
}

dispaly: table 

از این مقدار برای درست کردن جدول بدون استفاده از table استفاده می شود ، در واقع عنصری که خاصیت display: table را دارد به صورت یک جدول نشان داده می شود و عناصر درونی آن به صورت سطر ها و ستون ها استفاده می شوند . 

مخفی کردن عنصر در CSS

برای مخفی کردن عنصر می توانید مقدار display رو برابر none قرار بدید ، با این کار عنصر مورد نظر حذف می شود . اگر سورس کد های زیر را انجام دهید و بر روی اولی کلیک کنید این موضوع را بهتر خواهید فهمید : 

سورس کد HTML :

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>
		<link rel="stylesheet" type="text/css" href="style.css" />

	</head>
	<body>
	
		<div class="dis">Element dispaly:none</div>
		<div >Web30ty</div>
				
	</body>
</html>

سورس کد CSS : 

body{
	text-align:center;
}
div{
	height: 100px;
	background: green;
	border: #f00 2px solid;
	margin: 5px;
}
.dis:active{
	display: none;
}

حالا برای پنهان کردن عنصر می توانید از visibility: hidden استفاده کنید . فرقی که این روش با روش بالا دارد در این است که عنصر حذف نمی شود بلکه پنهان می شود و فضای خود را حفظ می کند :

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>
		<link rel="stylesheet" type="text/css" href="style.css" />

	</head>
	<body>
	
			<div class="dis">Element visibility: hidden</div>
			<div >Web30ty</div>
				
	</body>
</html>

سورس کد CSS : 

body{
	text-align:center;
}
div{
	height: 100px;
	background: green;
	border: #f00 2px solid;
	margin: 5px;
}
.dis:active{
	visibility: hidden;
}

اگر کد بالا را اجرا کنید این موضوع را بهتر درک خواهید کرد .

فیلم آموزش CSS را می توانید از لینک زیر دانلود کنید

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *