SYSK 185: CSS as a Replacement of Tables? Yes!
Did you know that you can design complex web pages without a single table by using cascading style sheets? Generally, this type of design results in smaller (as measured in downloaded bytes) pages, and (arguably as, if not more, importantly) pages that are easier to understand and maintain because it allows for a clear separation of content and formatting.
But first, one must understand CSS selectors, which is the topic of this post.
There are four kinds of CSS selectors:
- Tag selectors – the defined formatting applies to elements with matching type; e.g. div { … } will apply to all <div>…</div> elements
- Class selectors – formatting applies to all elements that use that class name; e.g. .redText { color: red; } will apply to all elements that have matching class attribute as in <div class=”redText”>Hello World!</div> .Note: you can specify multiple class names separated by space, e.g. <div class=”contents evenrow value”>123</div>
- Id selectors – formatting applies to a specific element with that id; e.g. #PageHeader { … } will apply to an element with id PageHeader as in <div id=”PageHeader”>XYZ</div>
Note: HTML elements on the page must have unique ids.
- Composite selectors – a combination of the above. Note: the order in which the tags appear will match the html element flow. For example,
#PageHeader .redText span
{
color: blue;
}
will apply blue color formatting whenever a span element is found as an inner element of another element with class=”.redText”, which, in turn, is an inner element of an element with id=”PageHeader”
Here is an example:
<style type="text/css">
#PageHeader { font-size: 20px; }
.redText { color: red; }
#PageHeader .redText span { color: blue; }
</style>
<div id="PageHeader">
<p class="redText">
<span>Blue Text</span>
Red Text
</p>
<span>Guess what color :)</span>
</div>
Other text
results in:
Blue Text Red Text
Guess what color :)
Other text
Another common variation of a composite selector is:
#SomeID div.myclass
which applies to all DIVs of class=”myclass” that are inner elements of an element with id=”SomeID”
Finally, you can apply the styling based on a behavioral attribute, e.g.
#SomeID a:hover
results in applying the rule to all links inside the element of id=”SomeID” but only when the mouse is hovering over.
So, check this out… The following CSS/HTML produces the result below:
<!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" >
<head>
<title>CSS Demo</title>
<style type="text/css">
#LeftSideBar
{
width: 200px;
border: 1px maroon solid;
border-bottom: 0px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
#LeftSideBar div.header
{
background: maroon;
color: white;
font-size: 110%;
font-weight: bold;
padding: 2px 0;
text-align: center;
}
#LeftSideBar div.contents
{
background-color: #FFD9D9;
}
#LeftSideBar a
{
display:block; /* turn an inline link element into a block element, so the entire area is clickable */
color: #0C0C0C;
font-size: 80%;
padding: 3px 3px 3px 5px;
border-bottom: 1px maroon solid;
text-decoration: none;
}
#LeftSideBar a:hover /* invert the back-color and fore-color when mouse is hovering over */
{
background-color: #C0C0C0;
color: white;
font-weight: bolder;
}
#LeftSideBar a.selected
{
border-right: 8px maroon solid;
}
#LeftSideBar a.selected:hover
{
color: #0C0C0C;
background-color: #FFD9D9;
}
</style>
</head>
<body>
<div id="LeftSideBar">
<div class="header">Possible Options</div>
<div class="contents">
<a href="HTMLPage.htm">Option 1</a>
<a href="HTMLPage.htm">Option 2</a>
<a href="HTMLPage.htm">Option 3</a>
<a href="HTMLPage.htm" class="selected">Option 4</a>
<a href="HTMLPage.htm">Option 5</a>
</div>
</div>
</body>
</html>
Stay tuned for tomorrow’s post for more on using CSS instead of tables.
Special thanks to Erik Saltwell who introduced me to the better way of designing web pages by using CSS instead of tables.
Comments
- Anonymous
August 24, 2006
Good example... but i think ul/li layout is better - Anonymous
August 24, 2006
That's great, now do a complex form layout for me... say 30 field and label sets of varying sizes or and make sure it renders completely in IE6 and 7, and Firefox. - Anonymous
August 24, 2006
Except Internet Explorer doesn't support display:table, display:table-cell so you cannot use any css selectors that only effect real tables like vertical-align. - Anonymous
August 24, 2006
For webpages this is great, but not for html e-mail.
Many webmail clients filter CSS. I bumped into that last week when i tried to send an image in an email with text over the image (z-index). Wasn't possible with css in Hotmail/msn, yahoo and g-mail. Creating a table with a background image resolved my problem. - Anonymous
August 24, 2006
Hmmm....you could at least use their proper names and link to the relevant part of the spec for people to find out more on their own. According to:
http://www.w3.org/TR/CSS2/selector.html
there are:
Type selectors ("Tag selectors")
Descendent selectors ("Composite selectors")
Child selectors (not mentioned)
Adjacent sibling selectors (not mentioned)
Attribute selectors (of which "Class selectors" are a subset)
ID selectors (Hey, you got one right :)
plus pseudo-classes and -elements. - Anonymous
August 24, 2006
As you have it, the code does not need to dispense with tables. The advantage of tables is that legacy systems can use them, even if they can't use CSS.
The following code changes are rudimentary, but still allow table formatting, for older browsers:
#LeftSideBar td.header
#LeftSideBar td.contents
instead of
#LeftSideBar div.header
#LeftSideBar div.contents
then changed the three div tags to table formatting, you would end up with the same results - modern, yet supporting legacy. - Anonymous
August 25, 2006
The comment has been removed