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.
Value | Description |
---|---|
table | Behaves like the table element. |
inline-table | Behaves like the table element, but creates an inline-level element. |
table-caption | Behaves like the caption element. |
table-column | Behaves like the col element. |
table-column-group | Behaves like the colgroup element. |
table-header-group | Behaves like the thead element. |
table-row-group | Behaves like the tbody element. |
table-footer-group | Behaves like the tfoot element. |
table-row | Behaves like the tr element. |
table-cell | Behaves 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>