Creating Table Layouts
Description
You can use the CSS table layout to lay out elements as if you would use the table element.
The values that relate to this feature are described in the following list. Each of the values shown in the table corresponds to an HTML element.
- 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.
Example
The following code creates a CSS Table Layout.
<!DOCTYPE HTML>
<html>
<head>
<style>
#table {<!-- www . j a v a 2 s . c o m-->
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>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</div>
<div class="row">
<p>
This is a test. <img src="apple.png" alt="apple" />
</p>
<p>
This is a test. <img src="banana-small.png" alt="banana" />
</p>
<p>No picture here</p>
</div>
</div>
</body>
</html>