Aligning Text & Cells : MGA - Web Development Tutorials

About the DoIT HTML Tutorial JavaScript Tutorial XML Tutorial PHP Tutorial Chapter 1 - Creating Web Pages Chapter 2 - Basic Document Layout Chapter 3 - Basic Document Styling Chapter 4 - Text Formatting Chapter 5 - Graphic Images Chapter 6 - Applying Special Styles Chapter 7 - Linking Pages Chapter 8 - Using Tables Chapter 9 - Playing Multimedia Chapter 10 - Creating Forms Chapter 11 - Designing Web Sites HTML/CSS Appendix Creating Tables Table Borders Table Captioning Table Colors & Background Table Size & Alignment Aligning Text & Cells Column & Row Spanning Table Groupings 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 (&nbsp;) 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>&nbsp;</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>&nbsp;</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>&nbsp;</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 (&nbsp;) 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>

TOP | NEXT: Column & Row Spanning