Creating Table Layouts

You create CSS table layouts by using the display property. The values that relate to this feature are described in the following table.

ValueDescription
tableBehaves like the table element.
inline-tableBehaves like the table element, but creates an inline-level element.
table-captionBehaves like the caption element.
table-columnBehaves like the col element.
table-column-groupBehaves like the colgroup element.
table-header-groupBehaves like the thead element.
table-row-groupBehaves like the tbody element.
table-footer-groupBehaves like the tfoot element.
table-rowBehaves like the tr element.
table-cellBehaves like the td element.
 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            #table { 
                display: table; 
            } 
            div.row { 
                display: table-row; 
                background-color: lightgray; 
            } 
            p { 
                display: table-cell; 
                border: thin solid black; 
                padding: 15px; 
                margin: 15px; 
            } 
            img { 
                float:left; 
            } 
        </style> 
    </head> 
    <body> 
        <div id="table"> 
            <div class="row"> 
                <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
                </p> 
                <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
                </p> 
                <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
                </p> 
            </div> 
            <div class="row"> 
                <p> 
                    This is big. <img src="http://java2s.com/Book/HTML-CSSImages/star.png" alt="big"/> 
                </p> 
                <p> 
                    This is small. <img src="http://java2s.com/Book/HTML-CSSImages/star.png" alt="small"/> 
                </p> 
                <p> 
                    No picture here 
                </p> 
            </div> 
        </div> 
    </body> 
</html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Related: