display

Sets whether the object is rendered.

{ display: sDisplay }

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">

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

Community Additions

ADD
Show: