Arranging Elements - Head First HTML and CSS - page 515

How to use CSS to create table displays

Now that you know how to add the HTML structure to support the CSS table display, let's
look at how we specify the CSS for each element to create the table display.

First, we added a <div> for the table with the id “tableContainer”.
This <div> contains the rows and columns. We style the
“tableContainer” <div> like this:

1

div#tableContainer {
display: table;
}

Next, we added a <div> for the row, with the id “tableRow”. We have
only one row, with two cells, so we need just one <div>. If we had
multiple rows, we'd need multiple <div>s. We style the row <div> like this:

2

The “t ableRow ” <div> represent s a row in the t able.

div#tableRow {
display: table-row;
}

We ha ve one ro w in our table, s o we just need th is

one ru le. If yo u have m ultiple ro ws, cons ider usin g a

class i nstead ( e.g., div.t ableRow ) so you can use o ne
rule t o style a ll the ro ws.

Finally, we used our existing “main” and “sidebar” <div>s for the cells
corresponding to each column in the row. We style these <div>s like this:

3

The “main” and “sidebar” <div>s are th e columns in
our table, so they each g et displayed a s table cells.

#main {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
}
#sidebar {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
}