O'Reilly logo

Beginning CSS: Cascading Style Sheets for Web Design, Third Edition by Richard York, Ian Pouncey

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required