Lecture 22: CSS Tables and Outlines

Overview:

1. Progressive Enhancement and Graceful Degradation
2. General Considerations with Tables
3. table-layout Property
4. empty-cells Property
5. border-spacing Property
6. border-collapse Property
7. caption-side Property
8. outline-related Properties

Progressive Enhancement and Graceful Degradation

• As we move into more advanced areas of CSS, we will find that support in Windows Internet Explorer 5.x & 6 (and sometimes IE 7) will be lacking for a number of properties. We have already seen this with the CSS2 selectors.
• Progressive enhancement means building in presentational effects that are standards-based and that the most standards-supportive browsers will render to some extent, while browsers not supporting them (e.g., Windows IE 5.x & 6) will just render without that presentational benefit (which is the graceful degradation).
• We need to make sure that non-supportive browsers render without adverse effect. If the adverse effect is noticeable, carefully consider whether the enhancement is worth it.

General Considerations with Tables

• Failed Inheritance: Windows IE 5.x fails inheritance from outer tags into table cells (<th> as well as <td>) for some properties. For example, it will pick up font-family instructions but not font-size instructions. Netscape 4.x completely fails inheritance into cells.
  
  The solve this issue style 'th' and 'td' (either as selectors or via a class/id) with the necessary instructions.
• Padding Considerations: The padding property replaces the cellpadding attribute for <table>. If you encounter cross-browser or cross-platform issues, note that the cellpadding attribute is not deprecated, so it is still valid under XHTML 1.0 Strict.
  
  If neither the padding property nor the cellpadding attribute is specified, be aware that a browser default greater than zero will be used.
  
  The padding property is more flexible because different sides can be given unique values and cells can be styled differently; the cellpadding attribute applies to all four sides of the cell and to all cells equally.
  
  Be sure to style the 'th' and 'td', not 'table'.
• Cellspacing Considerations: The cellspacing attribute is more challenging. The border-spacing property (described in this lecture) should replace the cellspacing attribute, but Windows IE 5.x & 6 lack support so it is necessary to continue specifying the cellspacing attribute.
  
  Like cellpadding it is not deprecated and, if not specified, defaults to a value greater than zero.
• Margins: Internal table elements (such as <tr>, <th>, and <td>) do not have margins, so avoid setting the margin property. Some browsers may try to render it, while others will not. Put a <div> inside the cell and apply the margins to it.
  
  Margins applied to <table> can also behave in an inconsistent fashion cross-browser.
• Border, Widths, and Heights: These can be specified for <th> and <td>.

table-layout Property

• The main benefit of table-layout is to speed up the rendering of large data tables.
• Using the 'fixed' value means that the table can start rendering after the first row is read by the browser, rather than waiting until the entire table is read.
• The 'fixed' algorithm uses the table's width, cell widths, borders, and cellspacing (specifically the settings for the first row's cells). Content is not factored into the rendering, which means that content wider than its cell will either overlap cells to the right or will be clipped (not displayed).
• The default 'automatic' algorithm will allow content to impact table width, if necessary, in order to keep content in its cell.

Property	Usage and Effect	Values Accepted	Recommendations
table-layout	Determines how a table is sized, either based on its content or using the specified widths. Apply to <table> and elements displayed as inline tables (display: inline-table).	auto (the default) | fixed	For consistent rendering cross-browser make sure that the <table> element has a defined width. Mac IE 5.x has no support. Always check to make sure that content is not being truncated. Narrow widths will pose difficulties.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Table-Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, td {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 16px;}
    td {border: 1px solid #000; width: 50px;}
    #fixed {width: 200px; table-layout: fixed;}
    #automatic {width: 200px;}
    --></style>
</head>
<body>

<h1>Table using the fixed layout algorithm:</h1>
<table cellspacing="2" id="fixed">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

<h1>Table using the automatic layout algorithm:</h1>
<table cellspacing="2" id="automatic">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

</body>
</html>

See how this example renders

empty-cells Property

• Browsers have traditionally collapsed (rendered without defined edges) any cells that are empty.
• To get around this web developers have inserted a single non-breaking space (&nbsp; or &#160;) into the cell to prevent it from collapsing (any character, other than a regular whitespace, prevents collapse).
• The empty-cells property instructs cells to either show borders for empty cells or to hide borders for empty cells.
• Unfortunately, Windows IE 5.x, 6, & 7 lack support.

Property	Usage and Effect	Values Accepted	Recommendations
empty-cells	Determines whether an empty table cell displays or hides borders.	show | hide	Windows IE 5.x, 6, & 7 lack support. Mac IE 5.x renders the empty cells too large.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Empty-Cells</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, td {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 16px;}
    td {border: 1px solid #000; width: 100px;}
    #show {empty-cells: show;}
    #hide {empty-cells: hide;}
    --></style>
</head>
<body>

<h1>Table with empty cells shown:</h1>
<table cellspacing="2" id="show" border="3">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td></td>
    <td></td>
</tr>
</table>

<h1>Table with empty cells hidden:</h1>
<table cellspacing="2" id="hide" border="3">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td></td>
    <td></td>
</tr>
</table>

</body>
</html>

See how this example renders

border-spacing Property

• This is intended to replace the cellspacing attribute, but it has no support in any IE version.
• As with other CSS properties, if cellspacing is specified as well as border-spacing the CSS takes priority and the attribute is ignored.
• If borders are instructed to collapse (via the border-collapse property) then the border-spacing is ignored.

Property	Usage and Effect	Values Accepted	Recommendations
border-spacing	Determines the space between table cells. Apply to <table> and elements displayed as inline tables (display: inline-table).	Number and unit (e.g., px, em, %) If two values are supplied they are space separated and the first value is horizontal (left/right) while the second value is vertical (top/bottom) spacing.	IE browsers lack support, so the cellspacing attribute is necessary for them.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Border-Spacing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, td {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 16px;}
    #equal {border-spacing: 8px;}
    #different {border-spacing: 10px 25px;}
    td {border: 1px solid #000; padding: 5px; width: 100px;}
    table {border: 1px solid #000;}
    --></style>
</head>
<body>

<h1>Table with equal border spacing around all cells:</h1>
<table id="equal">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

<h1>Table with different horizontal and vertical border spacing:</h1>
<table id="different">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

</body>
</html>

See how this example renders

border-collapse Property

• There are two ways to render cell borders (borders for <th> and <td>, not the traditional border associated with <table>)
• The default approach is to have them be separate, which means that borders of adjacent cells add together (so that if all cells have 2 pixel borders, where cells interconnect there would be 4 pixels of border).
• An alternate approach is to collapse the borders, which means that adjacent borders do not add together. The border value specified for the cells is truly what is used (top and left borders of cells are removed to make things fit, so that in the previous example the total border would be 2 pixels and not 4 pixels).

Property	Usage and Effect	Values Accepted	Recommendations
border-collapse	Determines whether table cells share borders or have distinct borders. Apply to <table> and elements displayed as inline tables (display: inline-table).	separate (the default) | collapse	Windows IE browsers do support this, but avoid cellspacing values greater than 0, due to gapping. Mac IE 5.x lacks support. Opera and Gecko-based browsers ignore the cellspacing attribute and the border-spacing property when borders are collapsed.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Border-Collapse</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, td {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 16px;}
    .collapse {border-collapse: collapse;}
    td {border: 3px solid #000; padding: 5px; width: 100px;}
    --></style>
</head>
<body>

<h1>Table with collapsed borders and 3px cell border:</h1>
<table class="collapse">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

<h1>Table with separate borders, no cellspacing, and 3px cell border:</h1>
<table cellspacing="0">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

<h1>Table with collapsed borders and cellspacing more than 0:</h1>
<table class="collapse" cellspacing="15">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

</body>
</html>

See how this example renders

caption-side Property

• One aspect of data tables not considered yet is the table caption, coded as <caption> </caption>
• Data tables are considered in more detail in INP 170: Web Coding II, so we will just look at this briefly.
• The <caption> is one of the few tags allowed to be between <table> and <tr> and there is only one caption per table.
• By default the caption is centered above the table, but via CSS the side it is on can be switched to the bottom and the horizontal alignment can also be adjusted via the text-align property.
• Unfortunately, Windows IE 5.x, 6, & 7 lack support and the (X)HTML attributes that control caption placement are either deprecated or proprietary.

Property	Usage and Effect	Values Accepted	Recommendations
caption-side	Determines whether a caption renders above or below the table.	top (the default) | bottom	Windows IE 5.x, 6, & 7 lack support.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Caption-Side</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, td, caption {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    .bottomcaption {caption-side: bottom; text-align: left;}
    td {border: 1px solid #000; padding: 5px; width: 100px;}
    table {border-collapse: collapse;}
    --></style>
</head>
<body>

<table cellspacing="0">
<caption>A sample caption using the defaults</caption>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

<p>&nbsp;</p>

<table cellspacing="0">
<caption class="bottomcaption">A left-aligned bottom caption</caption>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

</body>
</html>

See how this example renders

outline-related Properties

• An outline is a box drawn around an element.
• What makes the outline unique is that it does not take up any height or width in the layout, so outlines for adjacent elements can overlap.
• Think of outlines as being layered on top of the element.
• Unfortunately, there are different interpretations of how to render an outline, in terms of where it appears.

  Firefox, Opera, and Mac IE 5.x render in a consistent fashion, putting the outline outside the border. This seems to be the correct way to do it, based on the specification.

  Mozilla renders the outline inside the border.

  Safari has varied its rendering over time (depending on browser version).

  Windows IE 5.x, 6, & 7 have no support.

• Mozilla (but not Firefox) requires a proprietary -moz-outline property in order to work. This is due to how recently the property was introduced (it is part of CSS 2.1); whenever a property has not become part of a Recommendation but is in a draft form, those creating user agents can introduce their own non-standard versions which are preceded with either a hyphen or an underscore.
• These are really best for temporary visual effects, such as a :hover or :focus styling. The issue, however, is that not all browsers supporting outline will support it for :hover and :focus on all elements. Careful testing is required.

Property	Usage and Effect	Values Accepted	Recommendations
outline-color	Determines the color of the outline.	A pre-defined color name, hexadecimal value (e.g., #fff), an rgb value: rgb(255,0,0) or rgb(0%,50%,25%), or 'transparent'	Only one color can be specified and it applies to all four sides.
outline-style	Determines the style of the outline.	dotted | dashed | solid | double | groove | inset | outset | none	Only one style can be specified and it applies to all four sides.
outline-width	Determines the width of the outline.	Number and unit (e.g., px, em, %), as well as keywords (thin | medium | thick)	Only one width can be specified and it applies to all four sides.
outline	Combines the other outline-related properties into one sequence.	Sequence of Values: outline-width outline-style outline-color	Recommended because it is more efficient.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Outline</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, td {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 16px;}
    table {border-collapse: collapse;}
    td {border-bottom: 1px solid red;
        border-top: 1px solid red;
        padding: 5px;
        width: 100px;}
    td:hover {outline: 3px solid green;}
    p {background: #ccc;
       border: 1px solid #000;
       -moz-outline: 2px solid green;
       outline: 2px solid green;}
    --></style>
</head>
<body>

<h1>Outline hover effects for cells (works well in Firefox
and poorly in Opera):</h1>
<table cellspacing="0">
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
<tr>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
    <td>sampletext sampletext sampletext</td>
</tr>
</table>

<h1>Static outlines (works in all browsers supporting outline):</h1>
<p>Some sample text</p>
<p>And then even more</p>
</body>
</html>

See how this example renders

©2007 Jason Withrow. All rights reserved.