Sets or retrieves whether the object is rendered.

Syntax

HTML	{ display : sDisplay }
Scripting	[ sDisplay = ] object.style.display

Possible Values

sDisplay

String that specifies or receives one of the following values. block Object is rendered as a block element. inline Default. Object is rendered as an inline element sized by the dimensions of the content. list-item Microsoft Internet Explorer 6 and later. Object is rendered as a block element, and a list-item marker is added. none Object is not rendered. table-header-group Object is rendered as tHead. 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. table-footer-group Object is rendered as tFoot. 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. 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. table   Internet Explorer 8. Object is rendered as table. inline-table   Internet Explorer 8. Object is rendered as table within an inline-block. table-row   Internet Explorer 8. Object is rendered as tr. table-row-group   Internet Explorer 8. Object is rendered as tBody. Table body is always displayed after table-header-group objects and before table-footer-group objects. table-column   Internet Explorer 8. Object is rendered as col. table-column-group   Internet Explorer 8. Object is rendered as colGroup. table-cell   Internet Explorer 8. Object is rendered as cell (td) or header cell (th), depending on location within the table. table-caption   Internet Explorer 8. Object is rendered as caption. run-in   Internet Explorer 8. If the run-in box contains a block element, object is rendered as a block. If not, and the following sibling is a block (which is neither floating nor absolutely positioned), object is rendered as the first inline-block of the sibling. Otherwise, same as block. ruby   Internet Explorer 8. Specifies that an element defines a ruby structure. This and the following values are from the CSS3 Ruby Module. ruby-base   Internet Explorer 8. Specifies that an element defines a ruby base. ruby-text   Internet Explorer 8. Specifies that an element defines a ruby text. ruby-base-container   Internet Explorer 8. Specifies a container for one or more ruby base elements. ruby-text-container   Internet Explorer 8. Specifies a container for one or more ruby text elements.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of inline for all objects with the following exceptions:

ADDRESS	block
BLOCKQUOTE	block
BODY	block
CENTER	block
COL	table-column
COLGROUP	table-column-group
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
MARQUEE	block
MENU	block
OL	block
P	block
PLAINTEXT	block
PRE	block
RT	ruby-text
RUBY	ruby
TABLE	table
TBODY	table-row-group
TD	table-cell
TFOOT	table-footer-group
TH	table-cell
THEAD	table-header-group
TR	table-row
UL	block
XMP	block

The Cascading Style Sheets (CSS) attribute is not inherited.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

Remarks

In Internet Explorer 4.0, the block, inline, and list-item values are not supported explicitly, but do render the element.

The block and inline values are supported explicitly as of Internet Explorer 5.

In Internet Explorer 5.5 and earlier, the default value of this property for li elements is block.

The inline-block value is supported as of Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object's height or width.

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.

In Internet Explorer 8, the table display styles allow elements to closely parallel the visual layout of a table. The CSS table display model does not require explicit elements to correspond with the HTML tags. For example, an element styled as "display:table-cell" does not need to be contained within a block that is styled "display:table-row" to be styled correctly. Implicit table elements are created as necessary in an attempt to make the document valid. Contrast this behavior to the traditional HTML table model, where table elements are implicitly closed early to avoid unexpected nesting.

In Internet Explorer 7 and earlier, the default value of this property for table, tr, td, col, and colGroup elements is block.

Examples

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 feature requires Microsoft Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

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 feature requires Microsoft Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) .

Applies To

A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, CUSTOM, DD, defaults, DEL, DFN, DIR, 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, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

See Also

CSS Enhancements in Internet Explorer 6