HTML and CSS Reference
In-Depth Information
Q:
So, I know we're not covering HTML tables until
later in the topic, but is the CSS display: table similar
to using HTML tables?
A:
It is similar in the sense that you're creating
structure in your HTML that you can map to the rows
and columns of a table. But unlike HTML tables, CSS
display-table is all about presenting the content in that
structure using a table-like layout. HTML tables are for
tabular data
: data that should be structured as a table. So,
using CSS display-table is a way of creating a certain kind
of presentation layout, while HTML tables are all about
structuring your data. You'll learn all about HTML tables in
Chapter 13.
Q:
What do I do if I need more than one row in my
table display?
A:
If you need to display content in multiple rows, then
you just add more HTML structure to support that. If you
take a look at the Starbuzz HTML, you'll see we have two
columns (or three, after you add the Beverages column)
in one row. To add another row, you'd add another
<div> similar to the “tableRow” <div>, nested inside the
“tableContainer” <div>, and containing the same number
of columns as the first row. You can keep adding rows by
adding more <divs> like this.
Q:
Why did we add the vertical alignment to each
cell in the CSS with vertical-align: top?
A:
We added vertical-align: top to each table cell to
make sure that all the content aligns with the top of the
cell. If each cell is aligned this way, then the content in
each of our Starbuzz page columns should align at the top,
which makes for a more professional-looking presentation.
If you don't add a vertical alignment, you may find the
default alignment in your browser is set to middle instead.
In some cases, that might be what you want, of course!
You can set the vertical alignment to top, middle, or bottom.
Q:
Does it matter how much content I put in a cell?
A:
Not really. You'll probably want to make sure that
no one column has so much more content than other
columns that your page looks unbalanced, but ultimately,
it's up to you and how you want your page to look.
Q:
Can we control the width of the columns?
A:
Yes, you have some control over the width of the
columns with the width property. In the exercise to add
the Beverages column that you just did, you probably
noticed that we set the width of the column to 20%. You
can set the width of each column like this (and it's a good
idea to make sure the widths add up to 100%!). By using
percentages, your table will still expand and contract
appropriately as you resize the browser window.
