display
Sets whether the object is rendered.
sDisplay
String that specifies or receives one of the following values:
inline | Default. Object is rendered as an inline element sized by the dimensions of the content. |
block | Object is rendered as a block element. |
inline-block | Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting. |
list-item | Object is rendered as a block element, and a list-item marker is added. Applies to Microsoft Internet Explorer 6 and later versions. |
none | Object is not rendered. |
table-footer-group | Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each page spanned by a table. |
table-header-group | Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each page spanned by a table. |
This property has a default value of inline for all objects with the following exceptions:
ADDRESS | block | BLOCKQUOTE | block | BODY | block |
CENTER | block | COL | block | COLGROUP | block |
DD | block | DIR | block | DIV | block |
DL | block | DT | block | FIELDSET | block |
FORM | block | FRAME | none | HN | block |
HR | block | IFRAME | block | LEGEND | block |
LI | list-item | LISTING | block | MENU | block |
OL | block | P | block | PLAINTEXT | block |
PRE | block | TABLE | block | TBODY | none |
TD | block | TFOOT | none | TH | block |
THEAD | none | TR | block | UL | block |
XMP | block |
This property is not inherited.
All visible HTML objects are block or inline. For example, a DIV object is a block element, and a SPAN object is an inline element. Block elements typically start a new line and can contain other block elements and inline elements. Inline elements do not typically start a new line and can contain other inline elements or data. Changing the values for the display property affects the layout of the surrounding content by:
Adding a new line after the element with the value block.
Removing a line from the element with the value inline.
Hiding the data for the element with the value none.
In contrast to the visibility property, display=none reserves no space for the object on the screen.
The table-header-group and table-footer-group values can be used to specify that the contents of the thead and tfoot objects are displayed on every page for a table that spans multiple pages.
This example shows the effect of changing the values for the display property between inline, block, and none:
<span id=ospan>This is a span</span> in a sentence. <p> <input type=button value ="Block" onclick="ospan.style.display='block'"> :
This example uses function calls to hide and show table rows and cells:
<script>
function getPets()
{
oRow1Cell2.style.display="none";
oRow2Cell2.style.display="block";
oRow3Cell2.style.display="none";
}
</script>
:
<table>
<tr id="oRow1"><td>Horses</td>
<td id="oRow1Cell2">Thoroughbreds</td>
<td>Fast</td></tr>
<tr id="oRow2"><td>Dogs</td>
<td id="oRow2Cell2">Greyhounds</td>
<td>Fast</td></tr>
<tr id="oRow3"><td>Marsupials</td>
<td id="oRow3Cell2">Opossums</td>
<td>Slow</td></tr>
</table>
:
<input type=button onclick="getPets()" value ="Show household pets">
This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1).
A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEFAULTS, DEL, DFN, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, HN, HR, HTML, I, IFRAME, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, INS, LI, OBJECT, OL, P, Q, RT, RUBY, S, SELECT, SPAN, SUB, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP
