Rocket Jones Skunkworks

Testing Tables

First off, a table sans formatting.

cell 1,1	cell 1,2	cell 1,3	cell 1,4	cell 1,5	cell 1,6	cell 1,7
cell 2,1	cell 2,2	cell 2,3	cell 2,4	cell 2,5	cell 2,6	cell 2,7
cell 3,1	cell 3,2	cell 3,3	cell 3,4	cell 3,5	cell 3,6	cell 3,7
cell 4,1	cell 4,2	cell 4,3	cell 4,4	cell 4,5	cell 4,6	cell 4,7
cell 5,1	cell 5,2	cell 5,3	cell 5,4	cell 5,5	cell 5,6	cell 5,7
cell 6,1	cell 6,2	cell 6,3	cell 6,4	cell 6,5	cell 6,6	cell 6,7
cell 7,1	cell 7,2	cell 7,3	cell 7,4	cell 7,5	cell 7,6	cell 7,7
cell 8,1	cell 8,2	cell 8,3	cell 8,4	cell 8,5	cell 8,6	cell 8,7
cell 9,1	cell 9,2	cell 9,3	cell 9,4	cell 9,5	cell 9,6	cell 9,7
cell 10,1	cell 10,2	cell 10,3	cell 10,4	cell 10,5	cell 10,6	cell 10,7
cell 11,1	cell 11,2	cell 11,3	cell 11,4	cell 11,5	cell 11,6	cell 11,7

Moving right along, lets add some column headers.

Col 1 "th"	Col 2 "th"	Col 3 "th"	Col 4 "th"	Col 5 "th"	Col 6 "th"	Col 7 "th"
cell 1,1	cell 1,2	cell 1,3	cell 1,4	cell 1,5	cell 1,6	cell 1,7
cell 2,1	cell 2,2	cell 2,3	cell 2,4	cell 2,5	cell 2,6	cell 2,7
cell 3,1	cell 3,2	cell 3,3	cell 3,4	cell 3,5	cell 3,6	cell 3,7
cell 4,1	cell 4,2	cell 4,3	cell 4,4	cell 4,5	cell 4,6	cell 4,7
cell 5,1	cell 5,2	cell 5,3	cell 5,4	cell 5,5	cell 5,6	cell 5,7
cell 6,1	cell 6,2	cell 6,3	cell 6,4	cell 6,5	cell 6,6	cell 6,7
cell 7,1	cell 7,2	cell 7,3	cell 7,4	cell 7,5	cell 7,6	cell 7,7
cell 8,1	cell 8,2	cell 8,3	cell 8,4	cell 8,5	cell 8,6	cell 8,7
cell 9,1	cell 9,2	cell 9,3	cell 9,4	cell 9,5	cell 9,6	cell 9,7
cell 10,1	cell 10,2	cell 10,3	cell 10,4	cell 10,5	cell 10,6	cell 10,7
cell 11,1	cell 11,2	cell 11,3	cell 11,4	cell 11,5	cell 11,6	cell 11,7

Easier to read with some space formatting.

span 2 "th"		Col 3 "th"	Col 4 "th"	span 2 "th"		Col 7 "th"
cell 1,1	cell 1,2	cell 1,3	cell 1,4	cell 1,5	cell 1,6	cell 1,7
cell 2,1	cell 2,2	cell 2,3	cell 2,4	cell 2,5	cell 2,6	cell 2,7
cell 3,1	cell 3,2	cell 3,3	cell 3,4	cell 3,5	cell 3,6	cell 3,7
cell 4,1	cell 4,2	cell 4,3	cell 4,4	cell 4,5	cell 4,6	cell 4,7
This cell is two rows tall	cell 5,2	cell 5,3	cell 5,4	cell 5,5	cell 5,6	cell 5,7
	cell 6,2	cell 6,3	cell 6,4	cell 6,5	cell 6,6	cell 6,7
This cell spans the entire table
cell 8,1	cell 8,2	cell 8,3	cell 8,4	cell 8,5	cell 8,6	cell 8,7
cell 9,1	cell 9,2	cell 9,3	cell 9,4	cell 9,5	cell 9,6	cell 9,7
cell 10,1	cell 10,2	cell 10,3	cell 10,4	cell 10,5	cell 10,6	cell 10,7
cell 11,1	cell 11,2	cell 11,3	cell 11,4	cell 11,5	cell 11,6	cell 11,7

Finally, let's play with some color. Default overall is silver.

span 2 "th"		Col 3 "th"	Col 4 "th"	span 2 "th"		Col 7 "th"
cell 1,1	cell 1,2	white	cell 1,4	cell 1,5	cell 1,6	cell 1,7
cell 2,1	cell 2,2	cell 2,3	red	cell 2,5	cell 2,6	cell 2,7
cell 3,1	cell 3,2	cell 3,3	bold	cell 3,5	cell 3,6	cell 3,7
cell 4,1	cell 4,2	cell 4,3	italics	cell 4,5	default text	cell 4,7
This cell is two rows tall and yellow	cell 5,2	cell 5,3	cell 5,4	cell 5,5	cell 5,6	cell 5,7
	cell 6,2	cell 6,3	cell 6,4	cell 6,5	cell 6,6	cell 6,7
This cell spans the entire table
cell 8,1	cell 8,2	cell 8,3	cell 8,4	cell 8,5	cell 8,6	cell 8,7
cell 9,1	cell 9,2	cell 9,3	cell 9,4	cell 9,5	cell 9,6	cell 9,7
cell 10,1	cell 10,2	cell 10,3	cell 10,4	cell 10,5	cell 10,6	cell 10,7
cell 11,1	cell 11,2	cell 11,3	cell 11,4	cell 11,5	cell 11,6	cell 11,7

Let's see how that comes across via Avant Go, eh?

For the sake of completeness, here's the PDA post

If you don't recognize the term, PDA stands for Personal Digital Assistant, and refers to that group of handheld devices like the Palm Pilot, the iPAQ Pocket PC, Blackberry and many others. Basically, they're PC's that fit into your pocket. I recently got one, and love it to death.

Why in the world would you want to do a PDA-friendly version of your blog? Well, some of us out in the world are techno-junkies (not me) and some of us just don't have time to surf to all the places we'd like to each and every day (uh, that would be me). So by downloading your blog to our PDA's every day or two, we can benefit from your wisdom and insight whenever we have a moment or two to spare.

First I'll explain the steps to make your blog PDA friendly, then in part two I'll show those who have PDA's how to get this great blog content downloaded to your wee beastie. It's all in the extended entry.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<TITLE>Rocket Jones - PDA Version</TITLE>
<style type="text/css">
<!--
body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
leftMargin=0
}
h1 {
font:bold 12px/12px verdana, arial, helvetica,
sans-serif;
margin:0px 0px 0px 0px;
padding:0px;
}
p {
font:11px verdana, arial, helvetica, sans-serif;
color:#333333;
margin:0px 0px 0px 0px;
padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:0px;}
.tinyfont { font:8px verdana, arial, helvetica, sans-serif; }
.smallfont { font:9px verdana, arial, helvetica, sans-serif; }
.titlefont { font:14px verdana, arial, helvetica, sans-serif; }
a {
color:#000000;
font-family:verdana, arial, helvetica, sans-serif;
text-decoration:none;
}
A:link { color: #09c; TEXT-DECORATION: none }
A:visited { color: #07a; TEXT-DECORATION: none }
A:active { TEXT-DECORATION: none }
A:hover {
FONT-WEIGHT: normal; FONT-STYLE: normal
BACKGROUND: #eee;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] +
[top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px;
left and right borders: 0px */
line-height:11px;
background-color:#eee;
/* Here is the ugly brilliant hack that protects IE5/Win
from its own stupidity. Thanks to Tantek Celik for the
hack and to Eric Costello for publicizing it. IE5/Win
incorrectly parses the "\"}"" value, prematurely
closing the style declaration. The incorrect IE5/Win
value is above, while the correct value is below. See
http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule.
Basically, it feeds correct length values to user agents
that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2
parent-child selector. ALWAYS include a "be nice to
Opera 5" rule every time you use the Tantek Celik
hack (above). */
body>#Header {height:14px;}
.Content {
margin:5px 5px 5px 5px;
padding:2px;
}
.dateheader {
position:relative;
width:auto;
min-width:120px;
margin:0px 0px 0px 0px;
padding:5px;
z-index:3;
}
-->
</style>
</HEAD>
<BODY>
<DIV id=Header>Rocket Jones - PDA Version</DIV>
<div align="left">
<MTEntries lastn="15">
<MTDateHeader>
<div class="dateheader"><H1><$MTEntryDate format="%A, %B %e,
%Y"$></H1></DIV>
</MTDateHeader>
<br>
<DIV class="content">
<span class="titlefont"><i><$MTEntryTitle$></i>
(<$MTEntryDate format="%I:%M%p"$>)<br /></span>
<$MTEntryBody$>
<MTEntryIfExtended>
<p><$MTEntryMore$></p>
</MTEntryIfExtended>
<MTEntryIfAllowComments>
<p>
<p>:: Comments left behind ::</p>
<MTComments>
<$MTCommentBody$>
<span class="smallfont">:: <$MTCommentAuthorLink$>
<$MTCommentDate$></span><br /><br />
</MTComments>
</MTEntryIfAllowComments>
</div>
</MTEntries>
</div>
<HR width="75%">
<P CLASS="tinyfont" align="center">
<a href="http://www.movabletype.org">Powered by MovableType</a></P>
</body>
</html>

(end copy here)

5. Save the template.

6. Rebuild the template.

7. Go to your web site and view the results.

8. Tweak until satisifed.

9. Post a link to it on your main web site. I put mine in the sidebar.

10. Announce it. Put the word out. Let the world know that it's there so we can take advantage of it. There will be much rejoicing amongst us geekish types, because, you know, according to the Dilbert author, we're getting all the chicks and we don't have all day to be sitting at the keyboard anymore.

11. That's what he says anyways.

Ok, so that part is pretty straightforward. For those who don't want or like to tweak, the default as given above seems to be fairly standard and works well.

The next part will be for the PDA-enabled. You know it's out there, how do you get at it via your PDA?