Broad Network


The CSS Display Property

CSS Rendering for HTML Part 4

Foreword: In this part of the series, I talk about the values of the display property.

By: Chrysanthus Date Published: 25 Dec 2015

Introduction

This is part 4 of my series, CSS Rendering for HTML. The CSS display property determines how an HTML element is displayed. It also determines whether or not the element is displayed. In this part of the series, I talk about the values of the display property. You should have read the previous parts of the series before reaching here, as this is a continuation.

The different possible values for the display property are: inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit.

The initial (default) value is inline. I spend the rest of the tutorial talking about the effects of the different values.

none
When the value of the display property is none, the element is not displayed. Its space is taken up by the next element.

block
This value converts an inline level element into a block-level element. Try the following code:

<!DOCTYPE html>
<html>
    <head>
          <title>Sample</title>
    </head>
  <body>

    some text <span style="display:block">half line<br>This is a full line<br>half line</span>extra text

  </body>
</html>

The span element has been converted into a block-level element to occupy all the width of the containing block.

inline
This value converts a block level element to an inline element. The span element is a typical inline element. It can start in the middle of a line, to the end of the line, continue in the whole of the next line, and end half way in the following line. If a block level element such as the div element is converted into an inline element, it is broken down into lines like the span element. Try the following code:

<!DOCTYPE html>
<html>
    <head>
          <title>Sample</title>
    </head>
  <body>

    some text <div style="display:inline">half line<br>This is a full line<br>half line</div>extra text

  </body>
</html>

inline-block
This value converts an inline element to a block level element with rectangular structure so that the rectangular structure becomes part of the line. It also converts a block level element into an inline element, while maintaining the rectangular structure, so that the rectangular structure becomes part of the line. So, it converts either kind of elements into a rectangular structure so that the rectangular structure becomes part of the line. Try the following two code samples:

<!DOCTYPE html>
<html>
    <head>
          <title>Sample</title>
    </head>
  <body>

    some text <div style="display:inline-block">half line<br>This is a full line<br>half line</div>extra text

  </body>
</html>

<!DOCTYPE html>
<html>
    <head>
          <title>Sample</title>
    </head>
  <body>

    some text <span style="display:inline-block">half line<br>This is a full line<br>half line</span>extra text

  </body>
</html>

list-item
This value causes an element (e.g., LI in HTML) to generate a principal block box and a marker box see later.

table
This value converts an element such as a div element into a table element.

inline-table
This value converts an element such as the div element or the table element itself, to an inline-block table element. With that the table becomes part of the line. Try the following code:

<!DOCTYPE html>
<html>
    <head>
          <title>Sample</title>
    </head>
<body>

    some text
    <table style="display:inline-table">  
        <thead>
            <tr><th></th><th>Maths</th><th>English</th></tr>
        </thead>
        <tbody>
            <tr><th>John</th><td>50</td><td>60</td></tr>
            <tr><th>Mary</th><td>70</td><td>80</td></tr>
        </tbody>
        <tfoot>
            <tr><th>Total</th><th>120</th><th>140</th></tr>
        </tfoot>
    </table>  
    extra text

</body>
</html>

table-row
Specifies that an element (e.g. the p element) becomes a row of cells (tr) in a table.

table-row-group
Specifies that an element, groups one or more rows (tbody).

table-header-group
Makes an element a thead element.

table-footer-group
Makes an element a tfoot element

table-column
Specifies that an element describes a column of cells.

table-column-group
Specifies that an element, groups one or more columns.

table-cell
Specifies that an element (e.g. span) becomes a table cell (td, th).

table-caption
Specifies a caption for the table.

Read and try the following code, which is the above HTML table produces with different HTML elements:

<!DOCTYPE html>
<html>
    <head>
          <title>Sample</title>
    <style type="text/css">
        span {display:table-cell}
    </style>
    </head>
<body>

    some text
    <div style="display:table">  
        <div style="display:table-header-group">
            <p style="display:table-row"><span></span><span>Maths</span><span>English</span></p>
        </div>
        <div style="display:table-row-group">
            <p style="display:table-row"><span>John</span><span>50</span><span>60</span></p>
            <p style="display:table-row"><span>Mary</span><span>70</span><span>80</span></p>
        </div>
        <div style="display:table-footer-group">
            <p style="display:table-row"><span>Total</span><span>120</span><span>140</span></p>
        </div>
    </div>  
    extra text

</body>
</html>

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Related Links

Basics of HTML 5
Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course

BACK NEXT

Comments

Become the Writer's Fan
Send the Writer a Message