12

Styling Tables

WHAT YOU WILL LEARN IN THIS CHAPTER:

  • The optional table elements that can make it easier to style a table and that make the structure more intuitive
  • Controlling placement of the table caption
  • Controlling the layout of the table
  • Controlling the spacing between table cells

Tables are primarily a method to show the relationship between data, much as a spreadsheet application does. Tables can be complex creatures in HTML, but if used properly, they allow information to be presented in a neat, organized, and consistent manner.

OPTIONAL TABLE ELEMENTS

The <table> element has several optional elements that can be used to enhance the presentation and semantic value of a table, including captions, columns, headings, and footers. Take a look at a <table> element that makes use of all these optional elements. When I get into the discussion of styling tables, beginning with the section “Table Captions,” you'll need to understand what is possible in a table. The following markup shows a table complete with all the required and optional elements.

image

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
    <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
    <title>FIGURE 12-1</title>
</head>
<body>

<table>
    <caption>Ingredients</caption>
    <colgroup>
        <col class=“ingredient”>
        <col class=“quantity”> </colgroup> ...

Get Beginning CSS: Cascading Style Sheets for Web Design, Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial