I’m trying to build a cheat sheet for HTML tables and I can’t align my table to the center of the page. Here’s what I’ve got so far
I think that the parent element of the table would need to have the css text-align: center so that the table is centered.
If an element has text-align: center for its css style, then its children are centered, but the element with the text-align: center is affected.
Correct. To center a table object, we need the parent to have that rule. Simpler to not mess with alignment and apply the margin rule to the table:
table {
margin: 1em auto;
}
It follows the width will be less than that of the parent container.
As far as center aligning anything in a table, it really comes down to content, since that is aligned to the left by default in a TD. One would never force an inheritable rule on the parent, table, but direct it to the applicable TD elements. Such is the case with center alignment. Not a property we want to see in a table selector rule.
1 Like
On the topic of TABLE and its default behavior. we’ll know more once we explore the basic structure…
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TABLE: Default Behavior Inspection</title>
<style>
table {
border-collapse: separate;
border: dashed 2px;
}
td {
border: solid 1px;
}
</style>
</head>
<body>
<h1>TABLE: Default Behavior Inspection</h1>
<table>
<caption>A TABLE object</caption>
<thead>
<tr><th colspan="4">User Agent Style Sheet</th></tr>
<tr><td></td><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody>
<tr><th>abc</th><td>a</td><td>b</td><td>c</td></tr>
<tr><th>bac</th><td>b</td><td>a</td><td>c</td></tr>
<tr><th>bca</th><td>b</td><td>c</td><td>a</td></tr>
<tr><th>cba</th><td>c</td><td>b</td><td>a</td></tr>
<tr><th>cab</th><td>c</td><td>a</td><td>b</td></tr>
<tr><th>acb</th><td>a</td><td>c</td><td>b</td></tr>
</tbody>
<tfoot>
<tr><td colspan="4">Borders are added syles</td></tr>
</tfoot>
</table>
</body>
</html>
Apart from the added border properties, everything else is User Agent Style Sheet directed. The H1 is 2em bold, the CAPTION is 1em normal, center aligned, the THs are bold and center aligned, and the TDs are normal and left aligned.
Note where the borders are. We gave a 2px dashed border to the TABLE, and it does not enclose the CAPTION. This tells us that element is not bound to the table column structure and will always be the full width of the table. It can be a simple title, or an abstract of the table, as verbose as needs be without affecting the shape of the table.
We also gave a solid 1px border to only the TDs which allows our THs to stand out more. Notice the alignment and font-weight of the THs? It’s centered and bold by default. Think back to inherited centering and how it overshadows this basic rule. We should always know what User Agent Style Sheet rules we are overriding. This is, to my mind, RULE ONE of CSS authoring. Get to know the lay of the land before bringing in the bulldozers.
That means running bare bones HTML test examples like the above into the hundreds or thousands of examples. It never gets exhaustive but we do get a feel for the terrain after a while of testing scenarios. RULE TWO: Never start out trying to be fancy. Baby steps, and test every scenario possible at each one. Get this stuff into your bones and it will be an invaluable tool in your kit for all time. Nothing is too unimportant a detail, and only testing ad nauseum ferrets that out.
Just get used to the black and white screen and Times font. Study the effects of the User Agent Style Sheet at every turn. Not just tables, but lists, and blockquotes, and definition lists, and menus, and on and on, not to mention forms. Ooh baby is that going to be a unit.
Bottom line, it makes no sense wanting to rule over an element we haven’t studied the default behavior of. Some of the behavior we want is built in already. It helps our mission if we don’t have to struggle with defaults as adopt them and massage them.
Do ping this topic so we can explore more of tables in the raw. It’s an important topic that does not get talked about much. Now that folks have the sausage, they are not much interested in how it is made. If you want to get really intimate with HTML (and CSS) you are going to have to learn how to make sausage, in a manner of speaking.