CSS: The Missing Manual

Tutorial: Styling a Table

HTML is great for building tables, but you need CSS to give them style. As you can see in Section 10.1, it takes quite a bit of HTML to construct a simple table. Lucky for you, this book comes with a prebuilt HTML table for you to practice your CSS on. In this tutorial, you'll format the table's rows, columns, and cells, and give it an attractive font and background color.

To get started, download the tutorial files located on this book's companion Web site at http://www.sawmac.com/css/. Click the tutorial link and download the files. All the files are enclosed in a ZIP archive, so you need to unzip them first. (Go to the Web site for detailed instructions.) The files for this tutorial are in the chapter_10 → table folder.

1. Launch a Web browser and open the file chapter_10 → table → table.html .

   This CosmoFarmer.com page contains a simple HTML table that rates this season's indoor lawn mowers. The table has a caption, a row of table headers, and eight rows of data contained in table cells (Figure 10-9).

   

   Figure 10-9. Formatting a table with borders, background colors, and other CSS properties not only makes a drab HTML table (top) look great, but also makes the table's data easier to read (bottom).

2. Open table.html in a text editor.

   You'll start by creating a style that sets the table's width and text font.

   Note

   There are already a couple of external style sheets ...