Table layout 3

This is another method for formating content as a table.

This is a Table

Heading 1

Heading 2

Heading 3

Row 1 Column 1

Row 1 Column 2

Row 1 Column 3

Row 2 Column 1

Row 2 Column 2

Row 2 Column 3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Table Example</title>
</head>

<body>
<div class="Table">
    <<div class="Title">
        <p>This is a Table</p>
    </div>
    <div class="Heading">
        <div class="Cell">
            <p>Heading 1</p>
        </div>
        <div class="Cell">
            <p>Heading 2</p>
        </div>
        <div class="Cell">
            <p>Heading 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 1 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 2 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 3</p>
        </div>
    </div>
</div>
</body>
</html>

To make this code work you will need to add the code below in a CSS style sheet.


.Table{
    display: table;
}
.Title{
    display: table-caption;
    text-align: center;
    font-weight: bold;
    font-size: larger;
}
.Heading{
    display: table-row;
    font-weight: bold;
    text-align: center;
    background-color: #999;
}
.Row{
    display: table-row;
}
.Cell{
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
}