The attributes you’ll learn about in this section control the width of your tables and cells, the amount of spacing between cell content and rows and columns, and the width of the border
Trang 1▼ 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 indiccre-ates 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
266 LESSON 10: Building Tables
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 hereis) 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:
Trang 2<tr>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
10
You can format the HTML code any way you want As with all HTML, the browser ignores most extra spaces and returns I like
to format it like this, with the contents of the individual rows indented and the cell elements on separate lines so that I can pick out the rows and columns more easily.
Now add the second row The first cell in the second row is the Red heading on the left
side of the table, so it will be the first cell in this row, followed by the cells for the table
data:
<tr>
<th>Red</th>
<td>Red</td>
<td>Orange</td>
<td>Purple</td>
</tr>
Continue by adding the remaining two rows in the table, with the Yellow and Blue
head-ings Here’s what you have so far for the entire table:
<table border=“1” summary=“color combinations”>
<tr>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
<tr>
<th>Red</th>
<td>Red</td>
<td>Orange</td>
<td>Purple</td>
</tr>
<tr>
<th>Yellow</th>
<td>Orange</td>
<td>Yellow</td>
<td>Green</td>
NOTE
Trang 3</tr>
<tr>
<th>Blue</th>
<td>Purple</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
Finally, add a simple caption The <caption>element goes just after the <table>tag and
just before the first <tr>tag:
<table border=“1”>
<caption>Mixing the Primary Colors</caption>
<tr>
With a first draft of the code in place, test the HTML file in your favorite browser that
supports tables Figure 10.5 shows how it looks
268 LESSON 10: Building Tables
FIGURE 10.5
The
not-quite-perfect color
table.
Oops! What happened with that top row? The headings are all messed up The answer, of
course, is that you need an empty cell at the beginning of that first row to space the
head-ings out over the proper columns HTML isn’t smart enough to match it all up for you
(This is exactly the sort of error you’re going to find the first time you test your tables.)
Add an empty table heading cell to that first row (Here, it’s the line <th><br /></th>.)
<tr>
<th><br /></th>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
Trang 410
I used <th> here, but it could be <td> just as easily Because there’s nothing in the cell, its formatting doesn’t matter.
If you try it again, you should get the right result with all the headings over the right
columns, as the original example in Figure 10.4 shows
Sizing Tables, Borders, and Cells
With the basics out of the way, now you’ll look at some of the attributes that can change
the overall appearance of your tables The attributes you’ll learn about in this section
control the width of your tables and cells, the amount of spacing between cell content
and rows and columns, and the width of the borders As is the case with most attributes
relating to formatting, you can also use some CSS properties with the same effect
Setting Table Widths
The table in the preceding example relied on the browser itself to decide how wide the
table and column widths were going to be In many cases, this is the best way to make
sure that your tables are viewable on different browsers with different screen sizes and
widths Just let the browser decide
In other cases, however, you might want more control over how wide your tables and
columns are, particularly if the defaults the browser comes up with are strange In this
section, you’ll learn a couple of ways to do just this
Thewidthattribute of the <table>element defines how wide the table will be on the
page.widthcan have a value that is either the exact width of the table (in pixels) or a
percentage (such as 50% or 75%) of the current browser width, which can therefore
change if the window is resized If widthis specified, the width of the columns within
the table can be compressed or expanded to fit the required size
To make a table as wide as the browser window, you add the widthattribute to the table,
as shown in the following line of code:
<table border=“1” width=“100%”>
Figure 10.6 shows the result
NOTE
▲
Trang 5FIGURE 10.6
A table set to
100% width.
270 LESSON 10: Building Tables
If you make your table too narrow for whatever you put in it, the browser will ignore your settings and makes the table as wide as
it needs to be to display the content, unless you use the CSS overflow property to specify otherwise The overflow property was discussed in Lesson 8, “Using CSS to Style a Site.”
It’s nearly always a better idea to specify your table widths as percentages rather than as
specific pixel widths Because you don’t know how wide the browser window will be,
using percentages allows your table to be reformatted to whatever width the browser is
Using specific pixel widths might cause your table to run off the page Also, if you make
your tables too wide using a pixel width, your pages might not print properly
CAUTION
Specifying column widths in percentages is illegal under the XHTML 1.0 Strict specification If you want to specify your column widths in that manner, use Transitional DTD or specify the widths
in a style sheet I discuss using style sheets in this manner fur-ther along in this lesson.
Changing Table Borders
Theborderattribute, which appears immediately inside the opening <table>tag, is the
most common attribute of the <table>element With it, you specify whether border lines
are displayed around the table and if so, how wide the borders should be
Theborderattribute has undergone some changes since it first appeared in HTML:
n In HTML 2.0, you used <table border>to draw a border around the table The
border could be rendered as fancy in a graphical browser or just a series of dashes
and pipes (|) in a text-based browser
NOTE
Trang 6n Starting with HTML 3.2 and later, the correct usage of the borderattribute was a
little different: It indicates the width of a border in pixels <table border=“1”>
creates a 1-pixel wide border, <table border=“2”>a 2-pixel wide border, and so
on HTML 3.2 and later browsers are expected to display the old HTML 2.0 form
of<table border>, with no value, with a 2-pixel border (as if you specified
<table border=“1”>).
n To create a border that has no width and isn’t displayed, you specify <table
border=“0”> Borderless tables are useful when you want to use the table structure
for layout purposes, but you don’t necessarily want the outline of an actual table on
the page Browsers that support HTML 3.2 and later are expected not to display a
border (the same as <table border=“0”>) if you leave out the borderattribute
entirely
You can change the width of the border drawn around the table If borderhas a numeric
value, the border around the outside of the table is drawn with that pixel width The
default is border=“1”.border=“0”suppresses the border, just as if you had omitted the
borderattribute altogether
Figure 10.7 shows a table that has a border width of 10 pixels The table and border
defi-nition looks like this:
<table border=“10” width=“100%”>
10
FIGURE 10.7
A table with the
border width set to
10 pixels.
You can also adjust the borders around your tables using CSS, with much finer control
than the borderattribute provides
You learned about borders in Lesson 8, but there’s more to them when it comes to tables
For example, if you write a table like the one that follows, it will have a border around
the outside but no borders around the cells:
Trang 7<table style=”border: 1px solid red”>
<!— Table rows and cells go here —>
</table>
To draw borders around all the cells in a table (the way the borderattribute does), the
easiest way is to use a style sheet like this:
<style type=”text/css”>
table { border: 1px solid black; }
td, th { border: 1px solid black; }
</style>
If I applied that style sheet to the color table used in the previous example, it would
appear as it does in Figure 10.8
272 LESSON 10: Building Tables
FIGURE 10.8
A table with cell
borders applied
using CSS.
As you can see, there are gaps between the borders on each cell for this table To fix this,
we need to use the CSS border-collapseproperty on the tableelement It has two
pos-sible values, separateandcollapse The default is separate, it produces the result you
see in Figure 10.8 The style sheet that follows shows how to apply it:
<style type=”text/css”>
table {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
}
</style>
Figure 10.9 shows the results
Trang 8FIGURE 10.9
A table that uses
the
border-col-lapse property to
eliminate space
between cells.
10
The table that I used for this example included the border attribute to create a border If you apply table borders using CSS, they will override the border attribute, so you don’t need to remove it This can be helpful because primitive browsers (includ-ing the browsers on some mobile phones) don’t offer CSS sup-port, and including the border attribute will ensure that borders are still displayed.
Cell Padding
The cell padding attribute defines the amount of space between the edges of the cells and
the content inside a cell By default, many browsers draw tables with a cell padding of
two pixels You can add more space by adding the cellpaddingattribute to the <table>
element, with a value in pixels for the amount of cell padding you want
Here’s the revised code for your <table>element, which increases the cell padding to
10 pixels The result is shown in Figure 10.10
<table cellpadding=“10” border=“1”>
NOTE
FIGURE 10.10
A table with the
cell padding set to
10 pixels.
Trang 9Acellpaddingattribute with a value of 0 causes the edges of the cells to touch the
edges of the cell’s contents This doesn’t look good when you’re presenting text, but it
can prove useful in other situations
You can also specify the padding of a table cell using the paddingproperty in CSS The
advantages of doing so are that you can specify the padding for the top, left, right, and
bottom separately, and that you can specify different padding amounts for different cells
of the table if you choose to do so For example, you can set the padding of header cells
to 10 pixels on the top and 5 pixels on the sides and bottom, and then set the padding to
four pixels on all for sides for regular table cells
Cell Spacing
Cell spacing is similar to cell padding except that it affects the amount of space between
cells—that is, the width of the space between the inner and outer lines that make up the
table border The cellspacingattribute of the <table>element affects the spacing for
the table Cell spacing is two pixels by default
Cell spacing also includes the outline around the table, which is just inside the table’s
border (as set by the borderattribute) Experiment with it, and you can see the
differ-ence For example, Figure 10.11 shows our table with cell spacing of 8 and a border of 4,
as shown in the following code:
<table cellpadding=“10” border=“4” cellspacing=“8”>
274 LESSON 10: Building Tables
FIGURE 10.11
How increased cell
spacing looks.
Trang 10FIGURE 10.12
Using CSS to
specify cell
spac-ing and cell
padding.
10
If you want to completely eliminate any whitespace separating con-tent in table cells, you must set the table’s border, cell padding, and cell spacing to 0 Laying out your tables this way is unusual, but it can be useful if you’ve sliced up an image and you want to reassemble it properly on a web page.
The CSS equivalent of the cellspacingattribute is the border-spacingproperty, which
must be applied to the table To use it, the border-collapseproperty must not be set to
collapse, as it eliminates cell spacing border-spacingis slightly different than padding
With padding, you can specify the padding for all four sides of an element
border-spacingtakes one or two values If one value is specified, it is used for all four sides of
each cell If two are specified, the first sets the horizontal spacing and the second sets the
vertical spacing The table in Figure 10.12 uses the following style sheet, which sets the
cell padding for each cell to 5 pixels, and sets the cell spacing for the table to 10 pixels
horizontally and 5 pixels vertically:
<style type=”text/css”>
table {
border-collapse: separate;
border-spacing: 10px 5px;
}
td, th {
border: 1px solid black;
padding: 5px;
}
</style>
NOTE
Column Widths
You also can apply the widthattribute to individual cells (<th>or<td>) to indicate the
width of columns in a table As with table widths, discussed earlier, you can make the
widthattribute in cells an exact pixel width or a percentage (which is taken as a