|
LILLY ROBOT |
Display
| Property | Value |
|---|---|
| display | inline, block |
| visibility | hidden, visible, collapse |
Visibilty
An element can be hidden or visible. In the example below the second paragraph is hidden. Although, the paragraph is not visible the space is still used up.
The hidden value can be used when you want to hide certain information or quiz answers from your viewers.
<p>
First paragraph can be seen.
</p>
<p style="visibility:hidden">
Second paragraph can not be seen.
</p>
<p>
Third paragraph can be seen.
</p>
</body>
Displays
First paragraph can be seen.
Second paragraph can not be seen.
Third paragraph can be seen.
In a table we use the value collapse to hide the data. It allows you to collapse a row or a column. The value collapse can only be used inside
<style>
tr.colap
{
visibility:collapse;
}
</style>
</head>
<body>
<table //add class table style>
<tr>
<th>Name</th>
<th>id</th>
</tr>
//collapse the row
<tr class="colap">
<td>Jane</td><td>2341</td>
</tr>
<tr>
<td>Sara</td><td>3456</td>
</tr>
<tr>
<td>Mary</td><td>9834</td>
</tr>
</table>
</body>
Displays
Before collapse
| Name | id |
|---|---|
| Jane | 2341 |
| Sara | 3456 |
| Mary | 9834 |
Displays
After collapse
| Name | id |
|---|---|
| Jane | 2341 |
| Sara | 3456 |
| Mary | 9834 |
DISPLAY
We can have an element displayed in block or inline. An element displayed in block will have a line break before and after it e.g.<p>. An inline element has no line breaks e.g.<a>.
Example
<a href="index.html">HOME</a>
<a href="index.html">HTML</a>
<a href="css.html">CSS</a>
<a href="javascript.html">
JAVASCRIPT </a>
</body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
Displays
BLOCK
Paragraph 1
Paragraph 2
Display: Block
Below the links are displayed in a block style.
<style>
a
{
display:block;padding:5px
}
</style>
</head>
<body>
<a href="index.html">HOME</a>
<a href="css.html">CSS </a>
<a href="html.html">HTML </a>
<a href="javascript.html">JAVASCRIPT </a>
</body>
Display: Inline
Below the paragraphs are displayed as an inline style.
<style>
p{
display:inline
}
<head>
<style>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
Displays
DISPLAY:INLINE
Paragraph 1
Paragraph 2