HTML and CSS Reference
In-Depth Information
▼
Task:
Exercise 10.1: Creating a Simple Table
Now that you know the basics of how to create a table, try a simple example. You'll cre-
ate a table that indicates the colors you get when you mix the three primary colors
together. Figure 10.4 shows the table you're going to re-create in this example.
FIGURE 10.4
A simple color
table.
Here's a quick hint for laying out tables: Because HTML defines tables on a row-by-row
basis, sometimes it can be difficult to keep track of the columns, particularly with com-
plex tables. Before you start actually writing HTML code, it's useful to make a sketch of
your table so that you know the heads and the values of each cell. You might even find
that it's easiest to use a word processor with a table editor (such as Microsoft Word) or a
spreadsheet to lay out your tables. Then, when you have the layout and the cell values,
you can write the HTML code for that table. Eventually, if you do this enough, you'll
think of these things in terms of HTML tags, whether you want.
Start with a simple HTML framework for a page that contains a table. As with all HTML
files, you can create this file in any text editor:
<!DOCTYPE html>
<html>
<head>
<title>
Colors
</title>
</head>
<body>
<table>
...add table rows and cells here...
</table>
<
/body
>
</html>
Now start adding table rows inside the opening and closing
<table>
tags (where the line
add table rows and cells here
is). The first row is the three headings along the top
of the table. The table row is indicated by
<tr>
and each cell by a
<th>
tag:
