Text Alignment within Cells
Table cells are normally only as large as the data they contain. Their
borders close in around the data. Often, this effect makes a table seem
crowded and not particularly easy to read. Fortunately, you can introduce
white space around data within table cells, and you can expand the amount
of space between cells.
Cell Padding
Cell padding refers to the amount of blank space surrounding the text within
a cell. Its value is set with padding applied to the cell selector in a style
sheet. In the following table, padding of 5 pixels is placed around the data
in the table cells.
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Figure 8-28. A table with cell padding.
<style type="text/css">
table {border:outset 1px #000;}
table td {border:inset 1px #000; padding:5px}
</style>
Listing 8-27. Style sheet to apply padding to table cells.
Text Alignment
By default, text appears in a table aligned horizontally to the left of the cell
and vertically within the middle of the cell. This alignment becomes noticeable
when cell sizes are larger than needed to display their data.
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Figure 8-29. A table sized to show text alignment within cells.
You can override these default horizontal and vertical alignments to position
content anywhere within the cell.
Vertical Alignment
By using the vertical-align property, content can be aligned at the top, middle, or
bottom of a cell. The table in Figure 8-31 applies these alignments separately to
its three rows. Notice that the table is given width and height settings to make
cells larger than needed so that vertical alignment of cell data is visually apparent.
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Figure 8-30. A table sized to show vertical alignment within cells.
<style type="text/css">
table {border:outset 1px #000; width:250px; height:150px}
table td {border:inset 1px #000}
table tr#ROW1 {vertical-align:top}
table tr#ROW2 {vertical-align:middle}
table tr#ROW3 {vertical-align:bottom}
</style>
<table>
<tr id="ROW1">
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</style>
<tr id="ROW2">
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</style>
<tr id="ROW3">
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</table>
Listing 8-29. Style sheet to apply vertical alignment of text within cells.
Horizontal Alignment
By using the text-align property, content can be aligned at the left, center, or
right of a cell. The following table applies these alignments separately to its
three rows that have vertical alignments like the previous table.
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Figure 8-31. A table sized to show horizontal alignment within cells.
<style type="text/css">
table {border:outset 1px #000; width:250px; height:150px}
table td {border:inset 1px #000}
table tr#ROW1 {vertical-align:top; text-align:left}
table tr#ROW2 {vertical-align:middle; text-align:center}
table tr#ROW3 {vertical-align:bottom; text-align:right}
</style>
Listing 8-30. Style sheet to apply horizontal alignment of text within cells.
Empty Cells
Borders surround cells only when there is data inside the cells. If this does not occur,
no borders are displayed. This effect can be seen in the first of the two tables in
Figure 8-33 where data are missing from three of the cells. This may be an acceptable
display on occasion, but usually borders should display even around empty cells. This
situation can be handled by coding a non-break space character ( ) in the cells
thereby producing the second of the table displays where all borders are visible.
| |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
|
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
|
| |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
|
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
|
Figure 8-32. Tables with missing cell data.
<table>
<tr>
<td> </td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td> </td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td> </td>
</tr>
</table>
Listing 8-31. Using non-break space characters to display borders around empty cells.
Non-wrapped Table Cells
By default, text within cells is word wrapped to fit within the overall size of
the table. Normally, this is acceptable, to let the browser arrange cell content
for best fit with the cells. For certain cells, you may not wish the browser to
wrap its content. Such an example might be a row of column headings or a column
of row labels. The following table shows default sizing and alignment of cell
contents with non-wrapped display of column and row headings.
|
Table Column 1 |
Table Column 2 |
Table Column 3 |
| Table Row 1 |
Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Table Row 2 |
Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
Figure 8-33. Table with properly spaced row and column headings.
The problem arises when the table is resized. Such a problem may occur when the browser
window is sized smaller than the width of the table needed for non-wrapped presentation
of data. When this happens, the headings may wrap inside their cells which leads to the
table display shown below.
|
Table Column 1 |
Table Column 2 |
Table Column 3 |
| Table Row 1 |
Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Table Row 2 |
Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
Figure 8-34. Table with improperly spaced row and column headings.
There is nothing wrong with the content of the table, but it may look quite different
from what you intended. Text wrapping can be prevented in table cells by coding the
white-space style property for any cell in which you do not wish text
to be wrapped.
| Property: |
|
Value |
white-space
|
normal
nowrap
pre
|
Figure 8-35. The white-space style property.
This style property determines how the browser should handle white spaces within a text
string. The normal setting collapses all contiguous spaces to a single space, and breaks
the line of text at a blank space where the remaining text on the line does not fit within
the specified width of its container. In contrast, the nowrap setting treats spaces as
non-break space characters ( ) and does not break the line. The pre setting works
like a <pre> tag, and retains as many blanks spaces as are coded by
again treating them as non-break spaces.
If a table cell is not wide enough to display its text on a single line, then the text
normally is wrapped at a blank space within the text string. This occurs with the column
and row headings in the table in Figure 8-35. By setting the white-space:nowrap property
for these table cells, wrapping of headings can be avoided. These specifications are made
in recoding the table as follows.
|
Table Column 1 |
Table Column 2 |
Table Column 3 |
| Table Row 1 |
Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Table Row 2 |
Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
Figure 8-36. Table with non-wrapped row and column headings.
The following listing shows the complete code for the above table with non-wrapped
cells. In this case, style class .NOWRAP is defined with the property setting
white-space:nowrap. All cells that should not permitting text wrapping are assigned
to this class.
<style type="text/css">
table {border:outset 1px #000; width:230px}
table td {border:inset 1px #000; padding:3px}
table tr#C-HEAD {font-weight:bold; background-color:#F0F0F0; text-align:center}
table td#R-HEAD1 {font-weight:bold; background-color:#F0F0F0; text-align:left}
table td#R-HEAD2 {font-weight:bold; background-color:#F0F0F0; text-align:left}
table td#BLANK {background-color:#FFFFFF}
.NOWRAP {white-space:nowrap}
</style>
<table>
<tr id="C-HEAD">
<td id="BLANK"> class="NOWRAP"</td>
<td class="NOWRAP">Table Column 1</td>
<td class="NOWRAP">Table Column 2</td>
<td class="NOWRAP">Table Column 3</td>
</tr>
<tr>
<td id="R-HEAD1" class="NOWRAP">Table Row 1</td>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
<table>
<table>
<td id="R-HEAD2" class="NOWRAP">Table Row 2</td>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
</table>
Listing 8-32. Using non-wrapping of table cells.
Deprecated Table Attributes
Text is horizontally aligned within cells with the align="left|center|right"
attribute applied to the <tr>, <td>, or
<th> tags. Text is vertically aligned within cells by applying the
valign="top|middle|bottom" attribute to the cell.
Cell padding is specified with the cellpadding="n" (pixels) attribute
coded in the <table> tag. Spacing between cells is given by the
cellspacing="n" (pixels) attribute. The cellspacing attribute
must be used until browsers adopt the proposed border-spacing style property. More
information on this depreciated attribute is below.
<table border="1" cellpadding="5">
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
<table border="1" cellpadding="5" cellspacing="5">
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
Wrapping of text within cells can be controlled by coding nowrap or
nowrap="true" for any table cell: <td nowrap> or
<td nowrap="true">.
Cell Spacing
Cell spacing refers to the amount of space (in pixels) between the cells of the table,
effectively, the width of the inner borders between cells. Although CSS standards
propose the border-spacing property to adjust this spacing, current browsers do not
recognize it. Therefore, cell spacing must be applied with the deprecated
cellspacing="n" attribute of the <table> tag,
specifying the number of pixels between cell borders. Although this is a deprecated
attribute, it remains valid under HTML5 Strict standards. In the following example,
cellspacing is set to 10px.
| Cell 1.1 |
Cell 1.2 |
Cell 1.3 |
| Cell 2.1 |
Cell 2.2 |
Cell 2.3 |
| Cell 3.1 |
Cell 3.2 |
Cell 3.3 |
<style type="text/css">
table {border:outset 1px #000}
table td {border:inset 3px #000; padding:5px}
</style>
<table cellspacing="10">
...
</table>