HTML and CSS Reference
In-Depth Information
17
Styling Tables
A totally unstyled HTML table certainly doesn't fulfill the function of providing informa-
tion at a glance. Without styling, table cells collapse to the width of their content without any
margins, paddings, or borders to make the rows and columns distinct. This can make table
content hard to read.
Prior to HTML5, tables supported a number of default attributes that provided space
around the content as well as a — to be honest — somewhat unattractive border. Starting
with HTML5, these attributes are obsolete and styling a table is an absolute must. In this
lesson, you learn how to add padding, margins, and borders to tables as well as align them
and spice them up with color.
creaT
rea inG wHiTe sPace in Tab
sPace in Tab
sP
Les
reaT
Paddings and margins add white space to many HTML elements, such as
<div>
,
<p>
, and
<h1>
tags. With tables, you can add padding to a
td
selector when you want to increase the white
space around the cell content. Similarly, margins are applied to a CSS
table
selector to provide
additional space around the entire table or even position it. As you learn in this section, how-
ever, you'll need a whole new set of CSS properties to create space between table cells.
Start by adding white space around the entire table by creating a CSS rule with the
margin
property. Here's an example that places 20 pixels of space all around the table:
table {
margin: 20px;
border: 1px solid black;
}
As you can see in Figure 17-1, the margin keeps the table away from the horizontal rules above
and below as well as increases the space on the left and right. If you wanted to just add hori-
zontal spacing, you could either use the
margin-top
and
margin-bottom
properties or use
shorthand code like
margin: 20px 0
.
