HTML and CSS Reference
In-Depth Information
How CSS table display works
You can think of a table like a spreadsheet—a table has
columns
and
rows
, and at
the intersection of each column and row we have a
cell
. In a spreadsheet table, you
can put a value, like a number or some text, in each cell. With CSS table display,
each cell contains an HTML block element instead.
This
is the fi
rst colum
n.
In th
is table
we have
4
rows
and 3 c
olumns, f
or
a to
tal of 12
cells.
Let's say you've got a page with three images and three paragraphs, and you want to
lay them out in two columns with three rows. Here's how you'd do that conceptually,
using a table:
This is
the first
column.
I
n this ta
ble, we
have
t
hree row
s and t
wo
columns,
for a to
tal
of six ce
lls.
<div>
<img>
<p>
<div>
<img>
<p>
<div>
<img>
<p>
Notice that, because we only put block
elements into a table, we've wrapped
the images in a <div>.
