รูปแบบ Sintax ของ property นี้
โค้ด: เลือกทั้งหมด
visibility: visible|hidden|collapse|initial|inherit;
- visibility: visible ;
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:green;
}
.mindphp {
visibility: visible;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h1>Mindphp</h1>
<h2>visibility:visible;</h2>
<p class="mindphp">Mindphp.com สอนเขียนโปรแกรมด้วย PHP สอน OOP ฐานข้อมูล สอน ทำเว็บ Joomla phpBB OpenERP.</h2>
</body>
</html>
hidden :คุณสมบัตินี้ซ่อนองค์ประกอบจากหน้า แต่ยังใช้พื้นที่ในเว็บเพียงแค่มองไม่เห็น
- visibility: hidden;
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:green;
}
.mindphp {
visibility: hidden;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h1>Mindphp</h1>
<h2>visibility:hidden;</h2>
<p class="mindphp">Mindphp.com สอนเขียนโปรแกรมด้วย PHP สอน OOP ฐานข้อมูล สอน ทำเว็บ Joomla phpBB OpenERP.</h2>
</body>
</html>
collapse : คุณสมบัตินี้ใช้สำหรับองค์ประกอบที่เป็นตารางเท่านั้น มันถูกใช้เพื่อลบแถวและคอลัมน์ออกจากตาราง แต่จะไม่มีผลต่อเค้าโครงของตาราง แต่พื้นที่ของตางรางนั้น ยังสามารถใช้ได้สำหรับเนื้อหาอื่น ๆที่ไม่ได้ถูก collapse ไว้
- visibility:collapse;
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
table.mindphp {
visibility: collapse
}
table, th, td {
border:1px solid red;
p {
color:green;
font-size:25px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">Mindphp</h1>
<h2>visibility:collapse;</h2>
<p>Mindphp</p>
<table style="border:1px solid red;" class="mindphp">
<tr>
<th>PHP</th>
<th>ERP</th>
<th>Python</th>
</tr>
</table>
<p>Mindphp.com สอนเขียนโปรแกรมด้วย PHP สอน OOP ฐานข้อมูล สอน ทำเว็บ Joomla phpBB OpenERP.</p>
</center>
</body>
</html>
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP