Lectures 11 and 12: Tables
Overview:
- Tables Fundamentals
- The <table> Tag
- The <tr> Tag
- The <th> and <td> Tags
- Colors in (X)HTML
- Table Examples
- Spanning Columns
- Spanning Rows
- Using Graphics in Layouts
- Approaches to Coding a Graphical Navigation Bar
- Recommendations When Coding Tables
Tables Fundamentals
- Tables are intended to be used for holding tabular information, but have also been used for layout purposes since they were introduced.
- The first set of tags are: <table> </table>
- Tables are organized primarily by rows (<tr> </tr>).
- Within each row is a cell or cells containing data (<th> </th> are header cells and <td> </td> are data cells).
- There can be multiple sets of <th> </th> or <td> </td> tags, one set for each cell in the table.
- The <table>, <tr>, <th>, and <td> tags are all block-level (meaning that when nesting these tags, they should not be inside inline tags, such as <span>, <strong>, etc.).
A simple table (one row, two cells) is coded as:
<table border="1"> <tr> <td>Hello</td> <td>There</td> </tr> </table>This table renders as:
Hello There Increasing the complexity a bit more (two rows, three cells):
<table border="1"> <tr> <td>Hello</td> <td>There</td> <td>Friend</td> </tr> <tr> <td>How</td> <td>Is</td> <td>Class<br />Going Today?</td> </tr> </table>This more complex table renders as:
Hello There Friend How Is Class
Going Today?- Note the symmetry of the table; cells in the same column share the same width and cells in the same row share the same height. This is just the nature of tables.
The <table> Tag
| Attribute | Usage and Effect | Values Accepted | Default | Deprecated? |
|---|---|---|---|---|
| align | Horizontally aligns the table within its parent element (the tag holding it; if this is <body> then the horizontal alignment is based on the entire browser window). | left | center | right | left | Deprecated |
| bgcolor | Background color for the table. | One of the pre-defined color names or a hexadecimal value | Deprecated | |
| border | Border surrounding the table on all outer sides.
Sizing is in pixels. |
Number | 0 | Not deprecated |
| cellpadding | Space inside the cells; one value is used for all cells and affects all four sides within each cell.
Content in the cell is pushed in, based on the amount of cellpadding. Sizing is in pixels. |
Number | Defaults to a few pixels | Not deprecated |
| cellspacing | Space between the cells; one value is used for all cells and affects all sides of each cell.
Sizing is in pixels. |
Number | Defaults to a few pixels | Not deprecated |
| frame | Used in conjunction with the border attribute, this determines what areas of the outer border are shown.
Old browsers lack support for this attribute. |
Mouse over the value for details:
above | below | border | box | hsides | lhs | rhs | void | vsides |
border | Not deprecated |
| rules | Used in conjunction with the border attribute, this determines how inner borders are shown.
Rendering and support varies (even some modern browsers lack support), so exercise caution when using this attribute and be sure to test cross-browser and cross-platform. |
Mouse over the value for details:
all | cols | groups | none | rows |
all | Not deprecated |
| width | Sets the width of the table; accepts pixel values as well as percentages. | Number (for pixels) or percentage | Table is as wide as its content requires, if width is omitted | Not deprecated |
Attributes not in specification (browsers still render but will not validate; I recommend against using these but you will still see them in websites):
- background: This is specified as background="imagename.gif" (or imagename.jpg / imagename.png). Generally inserting a background image in a table is a bad idea; the results can be less than attractive, depending on the size of the image, the size of the table, and the browser used.
- height: Do not specify this attribute in the <table> tag. It is better to allow the content in the cell to determine the cell height naturally.
The <tr> Tag
| Attribute | Usage and Effect | Values Accepted | Default | Deprecated? |
|---|---|---|---|---|
| align | Horizontally aligns content within the cells in that row.
This can be a very quick, efficient way to center or right-align content in a number of cells. Table data cells (<td>) left-align by default, so they do not need that specified. Table header cells (<th>), however, center their content by default so specifying a left alignment would impact their rendering. |
left | center | right | justify | left | Not deprecated |
| bgcolor | Background color for the cells in that row.
Specifying a bgcolor inside a cell will override this row-level setting. |
One of the pre-defined color names or a hexadecimal value | Deprecated | |
| valign | Vertically aligns the content inside each cell in that row.
Baseline text is positioned on a line common to all baselined cells in the row. |
top | middle | bottom | baseline | middle | Not deprecated |
The <th> and <td> Tags
| Attribute | Usage and Effect | Values Accepted | Default | Deprecated? |
|---|---|---|---|---|
| align | Horizontally aligns content within the cell. | left | center | right | justify | left (for <td>) and center (for <th>) | Not deprecated |
| bgcolor | Background color for the cell. This will override the bgcolor set for that row. | One of the pre-defined color names or a hexadecimal value | Deprecated | |
| height | This sets the minimum height for the cell; if content pushes the cell taller the height will be ignored.
Pixels tend to be more reliable than percentages when setting heights. |
Number (for pixels) or percentage | Deprecated | |
| nowrap | If this attribute is set, content will not wrap to a new line unless forced by a tag (such as a line break tag or a paragraph tag).
Be careful with this attribute; it can cause significant layout issues. |
nowrap="nowrap" | Deprecated | |
| valign | Vertically aligns the content inside the cell.
Baseline text is positioned on a line common to all baselined cells in the row. |
top | middle | bottom | baseline | middle | Not deprecated |
| width | Sets the width for that cell. | Number (for pixels) or percentage | Deprecated |
Attribute not in specification (browsers still render but will not validate; I recommend against using this but you will still see it used in websites):
- background: This attribute specifies an image that will fill in the cell area. If the cell dimensions are larger than the image, the image will repeat horizontally and/or vertically (referred to as tiling). Specify background="imagename.gif" (or imagename.jpg / imagename.png).
Colors in (X)HTML
- Colors on the web are expressed in amounts of red, green, and blue (RGB). Other approaches to colors, such as CMY(K), are used in print and not for websites.
- For (X)HTML these RGB combinations are expressed as hexadecimals, which are six-character values. These range from #ffffff (white) to #000000 (black). Be sure to specify the # sign or some browsers (such as the Gecko-based browsers) will not display the color.
There are also predefined colors names that can be used. Over time the predefined names have expanded, but originally just sixteen were supported (if you specify a predefined name other than one of these sixteen, be sure to test cross-browser and cross-platform to determine support):
- aqua
- black
- blue
- fuchsia
- gray
- green
- lime
- maroon
- navy
- olive
- purple
- red
- silver
- teal
- white
- yellow
- Years ago there were concerns about colors dithering (shifting to the nearest match) because most monitors were 8-bit (256 colors) and colors could be specified that were not part of those 256 colors. To help deal with this issue, 216 colors were identified that were called web safe colors, because they would not dither on an 8-bit display.
- These days, however, 8-bit displays are seldom used so we no longer need to limit ourselves to web safe colors.
Table Examples
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tables: Example 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table cellpadding="5" cellspacing="5" border="1" width="600"
rules="rows">
<tr>
<th width="150">Header 1</th>
<th width="150">Header 2</th>
<th width="150">Header 3</th>
<th width="150">Header 4</th>
</tr>
<tr bgcolor="#cccccc" align="center">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr align="center">
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
<tr bgcolor="#cccccc" align="center">
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
</tr>
<tr align="center">
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tables: Example 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table cellpadding="5" cellspacing="0" border="5" width="750"
frame="hsides">
<tr bgcolor="#eeeeee">
<th width="30%" align="left">Header 1</th>
<th width="50%" align="left">Header 2</th>
<th width="20%" align="left">Header 3</th>
</tr>
<tr valign="top">
<td height="80">Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr valign="bottom">
<td height="80">Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td height="80">Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
<tr>
<td height="80">Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tables: Example 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table cellpadding="5" align="center" cellspacing="0" border="5"
width="75%">
<tr>
<td width="10%"> </td>
<th width="30%">Option 1</th>
<th width="30%">Option 2</th>
<th width="30%">Option 3</th>
</tr>
<tr align="center">
<th align="right">Item A</th>
<td>$565.00</td>
<td>$123.15</td>
<td>$25.22</td>
</tr>
<tr align="center">
<th align="right">Item B</th>
<td>$1333.15</td>
<td>$215.22</td>
<td>$12.65</td>
</tr>
<tr align="center">
<th align="right">Item C</th>
<td>$1205.15</td>
<td>$250.10</td>
<td>$125.35</td>
</tr>
<tr align="center">
<th align="right">Item D</th>
<td>$11,100.50</td>
<td>$2500.00</td>
<td>$1250.35</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tables: Example 4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table cellpadding="5" align="center" cellspacing="0" border="5"
width="100%">
<tr>
<th width="350">Header 1</th>
<th width="100%">Header 2</th>
<th width="350">Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td align="center">Data 2</td>
<td align="right">Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td align="center">Data 5</td>
<td align="right">Data 6</td>
</tr>
<tr>
<td>Data 7</td>
<td align="center">Data 8</td>
<td align="right">Data 9</td>
</tr>
<tr>
<td>Data 10</td>
<td align="center">Data 11</td>
<td align="right">Data 12</td>
</tr>
</table>
</body>
</html>
Spanning Columns
- Spanning refers to joining together cells in a table to create a single larger cell.
- To span columns in a table, there is a colspan attribute that can be specified in either <th> </th> or <td> </td>.
- The value assigned to the colspan attribute is a number that represents the number of cells being joined together.
By default a cell has a colspan value of 1 (this is never specified in the code), so when you determine the number of cells to join together you always include the current cell.
- To ensure that columns are the desired width, be sure to give each individual column its width. Do not rely on assigning widths to colspanned cells only, since the browser is then given the choice of what widths to assign to each of the columns that are joined together.
- Important: Whatever cells are spanned together never have their separate <th> </th> or <td> </td> tags specified in the code. The colspan attribute takes care of that. If you should accidentally put in those cells, they will render as odd-looking orphaned cells to the right edge of the table (because that row would have more cells than it could handle).
- One helpful strategy when working with colspan is to know ahead of time how many cells are in a row. Then you can just count up the cells in each row to make sure they all reach the proper number.
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Colspan Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table cellpadding="5" cellspacing="0" border="5" width="100%">
<tr>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
</tr>
<tr>
<td colspan="2" bgcolor="#eeeeee">A cell spanning 2 columns</td>
<td colspan="3" bgcolor="#eeeeee">A cell spanning 3 columns</td>
</tr>
<tr>
<td>An individual cell</td>
<td colspan="3" bgcolor="#eeeeee">A cell spanning 3 columns</td>
<td>An individual cell</td>
</tr>
<tr>
<td>An individual cell</td>
<td>An individual cell</td>
<td>An individual cell</td>
<td>An individual cell</td>
<td>An individual cell</td>
</tr>
<tr>
<td colspan="5" bgcolor="#eeeeee">A cell spanning 5 columns</td>
</tr>
</table>
</body>
</html>
Spanning Rows
- Spanning of rows uses the rowspan attribute, which is assigned to either <th> </th> or <td> </td>.
- Each cell automatically has a default rowspan of 1, so that is never specified.
- Rowspan is more complicated than colspan because now you are merging together cells that are in the same column, yet exist in different rows.
- Colspan and rowspan can be used together to create a large cell that merges together cells both horizontally and vertically.
- Important: Just as with colspan, whatever cells are spanned together with rowspan never have their separate <th> </th> or <td> </td> tags specified. If they are specified, the extra cells will appear to the right side of the table.
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Rowspan Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table cellpadding="5" cellspacing="0" border="5" width="100%">
<tr>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
</tr>
<tr>
<td rowspan="2" bgcolor="#eeeeee">A cell spanning 2 rows</td>
<td>An individual cell</td>
<td rowspan="2" bgcolor="#eeeeee">A cell spanning 2 rows</td>
<td>An individual cell</td>
<td rowspan="2" bgcolor="#eeeeee">A cell spanning 2 rows</td>
</tr>
<tr>
<td>An individual cell</td>
<td>An individual cell</td>
</tr>
<tr>
<td>An individual cell</td>
<td rowspan="3" bgcolor="#eeeeee">A cell spanning 3 rows</td>
<td rowspan="3" bgcolor="#eeeeee">A cell spanning 3 rows</td>
<td rowspan="3" bgcolor="#eeeeee">A cell spanning 3 rows</td>
<td>An individual cell</td>
</tr>
<tr>
<td>An individual cell</td>
<td>An individual cell</td>
</tr>
<tr>
<td>An individual cell</td>
<td>An individual cell</td>
</tr>
</table>
</body>
</html>
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Colspan and Rowspan Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table cellpadding="5" cellspacing="0" border="5" width="100%">
<tr>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
<td width="20%">An individual cell</td>
</tr>
<tr>
<td rowspan="2" colspan="2" bgcolor="#eeeeee">
A cell spanning 2 rows and 2 columns</td>
<td>An individual cell</td>
<td rowspan="2" colspan="2" bgcolor="#eeeeee">
A cell spanning 2 rows and 2 columns</td>
</tr>
<tr>
<td>An individual cell</td>
</tr>
<tr>
<td>An individual cell</td>
<td rowspan="2" colspan="3" bgcolor="#eeeeee">
A cell spanning 2 rows and 3 columns</td>
<td>An individual cell</td>
</tr>
<tr>
<td>An individual cell</td>
<td>An individual cell</td>
</tr>
<tr>
<td colspan="5" bgcolor="#eeeeee">
A cell spanning 5 columns</td>
</tr>
</table>
</body>
</html>
Using Graphics in Layouts
- Any space around the <img /> tag in the code can create gaps when the code is rendered, due to the inline nature of the tag (inline tags accept at most one space to either side). The best solution to this is to tighten up the code by removing all white space and line breaks between the tags. For an illustration of this, see the example below.
- It is always recommended to set cellpadding and cellspacing to zero for tables holding images, because of the gaps those create. Their default values are greater than zero, so leaving them unspecified is not an option.
- Specify heights and widths for images to speed up rendering and border="0" (if the image is linked) so no blue borders appear around linked navigation 'buttons'. Eventually we will use CSS to disable the borders and can then remove the attribute, which is deprecated.
- When deciding on what alt text to assign, keep in mind that alt text is a replacement for the image. If you are assigning alt text to a navigation 'button', use the text on the 'button' as your alt text.
- Netscape 6.x (and the corresponding version of Mozilla, which is so old it is not a concern) has the unfortunate tendency to put gaps around images when any doctype (Transitional or Strict) is specified, because it shifts to 'Full Standards Mode'.
Netscape 7.x+, current versions of Mozilla, Firefox 1.x+, and Opera do not have this problem as long as Transitional doctype is used (this places them in 'Almost Standards Mode'). If Strict doctype is used (which is the case in this file) they use 'Full Standards Mode' and the images move apart.
Under Strict doctype you would need to have those images display as block-level for rendering to be correct; this is done for the image below so that it renders as desired (we will cover modifying how an element displays when we get into CSS).
If Netscape 6.x is a target browser either use browser detection to detect the browser and not send it a doctype, or set those images to display as block-level.
The 'trouble spots' in the code below that create gaps in Internet Explorer are in italics:
<table width="171" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img alt="Browse" height="19" width="171" src="browse.gif" />
</td>
</tr>
<tr>
<td width="171">
<table width="171" cellpadding="1" cellspacing="0" border="1">
<tr>
<td>Sample Text</td>
</tr>
</table>
</td>
</tr>
</table>
The code renders as:
|
|
|
Tightening up the code, so that the <td> tags are on the same line and up against the <img /> tag solves this problem in Internet Explorer (note that this does not solve the problem for Gecko-based browsers and Opera; to fix rendering in those browsers I also instructed the image to display as block since this page uses Strict doctype).
From: <td> <img alt="Browse" height="19" width="171" src="browse.gif" /> </td> To: <td><img alt="Browse" height="19" width="171" src="browse.gif" /></td>
After Tightening Up the Code:
|
|
|
Approaches to Coding a Graphical Navigation Bar
This navigation bar would contain a series of individual graphical 'buttons' and would either be vertical or horizontal. Note that combinations of the two approaches are possible.
- All code for images and (possibly) <br /> tags in a line, no spaces:
Make sure every <img /> tag is touching, placed one after another in a long row of code.
If the navigation bar is vertical, use <br /> tags between the <img /> tags, but again be sure to have no spaces at all.
This requires less code than the second approach, but the long lines of code can be hard to update.
One option that would make the code more readable (and easier to edit) would be to break each <img /> tag across two lines by putting a hard return somewhere inside the tag, between attributes. Just be sure to test cross-browser and cross-platform.
-
Each image in its own table row(s) and/or cell(s):
In this approach a table is used to hold the graphics.
For a vertical navigation bar, this means each graphic is in its own <tr> </tr> and <td> </td>.
For a horizontal navigation bar all the graphics are in separate <td> </td> tags but are in the same <tr> </tr>.
Recommendations When Coding Tables
- Indenting: Be sure to indent your code, as shown in the examples above - this will make troubleshooting any coding issues much easier.
- Sketching/Planning: Before you write any code, sketch on a piece of paper the layout of the table, so that you know ahead of time how many rows and cells you need.
- Closure: Always be sure to close your tags, especially the final </table> tag. If this is not closed, the table will not render in legacy browsers (NS 4.x). Modern browsers can run into rendering glitches as well.
- Accounting for cells: Once you create a cell, that cell will need to be accounted for in all the subsequent rows of the table. So if you have three sets of <td> tags in a <tr>, if you add another <tr> you will need to have those three sets of <td> tags incorporated.
- Multiple Tables: Multiple tables can be placed in an (X)HTML document, one after the other, going down the page, but be aware that each table will start on its own row (putting two tables side by side on the page usually requires nesting of tables). Splitting up content into multiple separate tables speeds up loading/rendering, because content will appear as soon as its table is completely read.
- Correct Addition and Table/Cell Width Arrangements: Make sure that the combined widths for your <th> and <td> tags add up to the same width specified in your <table> tag, if you are using pixel sizes at both levels. If you are using percentages for the <th> and <td> widths, those widths should equal 100%.
It is fine to have a fixed-width table that has variable-width cells totaling 100%, but the opposite setup (variable-width table, fixed-width cells) is to be avoided because the fixed-width cells will rarely add up to the variable width, which changes as the window is resized.
- Troubleshooting: When troubleshooting tables, turn on the borders and specify background colors, so you can see what is happening with the rows and cells.
- Empty Cells: To 'hold open' an otherwise empty cell in a table (to prevent it from collapsing) put a non-breaking space ( ) between the <th> </th> or <td> </td> tags. If you do not, that cell may not display (it will collapse) and in tables used for layout the other cells may infringe upon the space set aside for that cell.