در این قسمت از فیلم آموزش 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 گذاشتین مثلا همین جداول و استایل دادن بهشون در HTML5 قابل اجرا هستن؟
اینو میپرسم چون جدول در HTML5 منسوخ شده و کارشو بهcss واگذار کردن میخوام بدونم با این کار دوباره میشه جدول سازی کرد؟
سلام
به صورت کامل table حذف نشده است ، چون قبلا بیس سایت هارو با table درست میکردن این کار در html5 حدف شده و گرنه هنوز هم جدول خیلی جا ها کاربر دارد و برای نمایش مثلاً فاکتور به مشتری یکی از بهترین گزینه ها استفاده از table هست و در خیلی از جا ها هم کاربرد زیادی داره و به هیچ عنوان هم کار جدول رو به css واگذار نکردند .