Visible property is used to specify whether an element is visible or not in a web document, but the hidden elements take up space in the web document. You can set the visibility property of an element in CSS using the same Visible property.
Through visibility property, we can make elements like images, text, boxes, etc visible to our naked eye, or you can even hide. To hide table elements you can use collapse, which you will encounter further in this article.
Syntax:
visibility: visible | hidden | collapse | initial | inherit;
Property value:
- visible: It is the default value. The element is a show or visible normally in the web document.
- hidden: This property hides the element from the page but takes up space in the document.
- collapse: This property only used for the table elements to remove the rows and columns from the table.
Example 1: Using Visible and hidden property value.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.line1 {
color: green;
/* visible value to make element visible */
visibility: visible;
}
.line2 {
color: green;
/* hidden value to hide elements from user. */
visibility: hidden;
}
</style>
</head>
<body>
<h1>
Given line is <small class="line1">
Welcome to GeeksforGeeks</small> Visible
</h1>
<h1>
Given line is <small class="line2">
Welcome to GeeksforGeeks</small> Hidden
</h1>
</body>
</html>
|
Output:
Example 2: Using Collapse property value.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table.geeks {
/* collapse value to delete row and
column from table */
visibility: collapse
}
table,
th,
td {
border: 1px solid red;
p {
color: green;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2>visibility:collapse;</h2>
<p>geeksforgeeks</p>
<table style="border:1px solid red;" class="geeks">
<tr>
<th>geeks</th>
<th>for</th>
<th>geeks</th>
</tr>
</table>
<p>A computer science portal for geeks</p>
</center>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
09 Sep, 2021
Like Article
Save Article