HTML5 24-Hour Trainer

Chapter 17. Styling Tables

A totally unstyled HTML table certainly doesn't fulfill the function of providing information 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.

CREATING WHITE SPACE IN TABLES

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, however, 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 ...