HTML Tables for Red Staters
By Neil Stevens Posted in Miscellanea — Comments (16) / Email this page » / Leave a comment »
Part of the ongoing series.
Tables are the most overused and misused feature of HTML across the Internet, but there are times when they are useful to Red Staters. We deal in polls and other lists of figures often enough for HTML tables to be necessary, in fact. So please, use tables when appropriate, but use them sparingly. Never use the following information for anything but an array of information. Never use it to make things look pretty even though they don't belong in a table.
To make a table in HTML, one creates rows of cells. It's that simple. Here is a very basic table:
| 1 | 2 | 3 |
| Alice | Bob | Carol |
Here is how the table is constructed. First, begin the table element:
<table>
Then, begin a row:
<table>
<tr>
Next, begin adding cells of table data that belong to that row:
<table>
<tr><td>1</td><td>2</td><td>3</td>
Finish the row when all the data for that row is added:
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
Repeat the previous three steps for each additional row of data:
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Alice</td><td>Bob</td><td>Carol</td></tr>
Finally, end the table itself after adding the last row:
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>Alice</td><td>Bob</td><td>Carol</td></tr>
</table>
Some readers are already objecting. "Hey! I've seen you do tables much fancier than that! Tell us how to do those tables!" I will, immediately in fact, however one has to know the basics before one can add the frills. Frill number one: headers. When a cell is actually a header and not an element of data, use the th element instead of td:
<table>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>Alice</td><td>Bob</td><td>Carol</td></tr>
</table>
In Red State's standard style, our table now looks like this:
| 1 | 2 | 3 |
|---|---|---|
| Alice | Bob | Carol |
Frill number two: Colors and borders. The same CSS style options available to text paragraphs and spans are also available for table cells:
<table style="margin-bottom: 1em; padding: 2px; border: 1px solid black; text-align: center;">
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>Alice</td><td style="background-color: #400000; color: white;">Bob</td><td>Carol</td></tr>
</table>
Which now makes our table look like this:
| 1 | 2 | 3 |
|---|---|---|
| Alice | Bob | Carol |
Frill number three: cells that span more than one row or column. Use colspan and rowspan attributes to accomplish this. Note that they don't go in the style, but are separate. This is a quickie example that should be clear with a little study:
<table style="margin-bottom: 1em;">
<tr><td/><th>Vis Numar</th><th>Markos Moulitsas</th><th>Mary Landrieu</th></tr>
<tr><th>Party</th><td style="text-align: center; background-color: #ffefef; color: black;" colspan="3">Democratic</td></tr>
<tr><th>Organization</th><td rowspan="2" style="background-color: black; color: white;">The Stars</td><td>Daily Kos</td><td>US Senate</td></tr>
<tr><th>Guidance</th><td>Hate</td><td>Voters</td></tr>
</table>
| Vis Numar | Markos Moulitsas | Mary Landrieu | |
|---|---|---|---|
| Party | Democratic | ||
| Organization | The Stars | Daily Kos | US Senate |
| Guidance | Hate | Voters | |
And remember: please preview before posting any tables. Broken table HTML is far more destructive to further comments on the site, than any other kind of broken HTML. Be careful!
Side note: I actually used the margin-bottom: 1em; style for every table in this example, because Red State's standard style neglects to give tables a bottom margin, making the following text run right up against it.
| Poll | (previous) | |
|---|---|---|
| Rep | 49 | (46) |
| Dem | 45 | (46) |
Sweet. Thanks Neil.
______________________________________
Bobby Jindal Saves Louisiana
Meant to add this to begin with but forgot until after I submitted.
HTML Help Central for Red Staters
Reality: Thompson/Romney Dream: Santorum/Watts.
although the last time I tried to place table text in a comment, it wound up adding a number of blank lines above the table. Either someone tweaked the comment template or ? At the time I trimmed down the table to the basics that you've demonstrated, and it STILL did the weirdness with the blank lines. So, I guess I'll just trust that all is well now...
| Bill | George | Tom | Dick | |
| 55 | 240 | 81 | 176 | |
| 231 | 51 | 86 | 334 | |
| 96 | 30 | 574 | 34 | |
| Totals | 382 | 321 | 741 | 544 |
And lo and behold, it works now. Weird.
...when they see me they'll say, "There goes Loren Wallace,
the greatest thing to ever climb into a race car."
True, one of those flawed Olympian beings who get things wrong.
Still, a god. :>)
But I understand he comes to Fred Thompson when he has media issues and Neil when his web site needs a little something.
--
Gone 2500 years, still not PC.
If I ever want ideas on federalist website design, I'm hitting up Fred fast.
HTML Help Central for Red Staters
Reality: Thompson/Romney Dream: Santorum/Watts.
Tim Berners-Lee was recently given an award and pronounced the greatest scientist since Einstein. But I think his god-like status in Europe is more about their feelings of being dominated by American technical innovation. So at last, something in the modern age was invented in Europe!
Except of course, the University of Minnesota did a similar system called Gopher well before WWW, and Apple did hypertext, and HTML is based on IBM's SGML language, and what really made WWW take off was the University of Illinois' Mosaic browser that let you display pictures in a web page.
When WWW was invented at CERN, they thought it would be a great way for scientists to put their journal papers online. Not a profound vision of the future. Few academics really knew where the web was going. Windows 95 brought full internet connectivity to the masses, and in a very short time, hundreds of millions of people where on the net. The internet was no longer just college students sending emails to each other. And after that, capitalism kicked into high gear.
For better or worse, the internet is American cultural hegemony at its best. :-)
I won't say greatest since Einstein, but I'lll give TBL his just due. HTML was only part of his success story. The http was even more important. The two taken in synergy, allowed the technically unskilled people (your's truly, eg.)to organize and wharehouse more data than any other invention in history. He was a leader in the democratization of information.
James Hansen - Scott THomas Beauchamp with a PhD.
I was using SCRIPT, DCF and GML technologies for many years prior to the emergence of HTML. In fact, I thought we took a giant step backwards when I first saw it, since WYSIWYG word processors had already become commonplace at the time. However, it was obvious to me that there was significant potential for cross-client applications with (at the time) CGI scripting and related technology. The lab where I worked had Windows, Mac and OS/2 systems at the time, and the "applications" worked the same on all of them. Finally - cross-platform compatibility! And we had worked on "compound documents" years prior to the emergence of Mosaic and HTML. TBL was just the catalyst that finally got it right.
The key to success of Web technologies is a) they started off as very "thin" technologies (server and client) that did not require huge amounts of resource to use, b) the use of web "applications" eliminated the overhead of managing "thick client" software on workstations, and c) the rapid expansion of the ubiquitous nature of web browsers and related technology. Of course "technology creep" started soon thereafter, and outrageous growth of pages occurred with bloated graphics, huge blobs of Javascript, Java applets, etc., which in turn caused web apps to grind almost to a halt. Once broadband emerged, the thick nature of pages adorned with 100Kb graphics, flash applets, Javascript, and related was no longer an issue. Now Web 2.0, YouTube and other multimedia sources have again started to strain the infrastructure.
I guess that's why I continue to be employed...
...when they see me they'll say, "There goes Loren Wallace,
the greatest thing to ever climb into a race car."
I miss the days when the Internet was just computer geeks and college students talking to each other. There was a small-town feel to it that is gone forever, back in the days where you could post your real actual email address in a Usenet post and not be overrun with spam, when you could make a name for yourself simply by posting intelligently to news.groups, when comp.* was half of Usenet volume and rec.* was half of the rest.
---
(Formerly known as bee) / Internet member since 1987
Member of the Surreality-Based Community
Thanks Neilster! I'll try it later. Another question: I think you showed once how to get a table from Excel (or maybe it was a pasting a table from the web) into an RS comment without the columns getting all misaligned. What was that tip?
I specifically told you my table didn't come from a spreadsheet program, heh.
But this in this diary is the right way to do a table, really.
HTML Help Central for Red Staters
Reality: Thompson/Romney Dream: Santorum/Watts.
As I said, it might have been a tip on pasting a table from the web without messing up the column alignment. What was that tip?
HTML Help Central for Red Staters
Reality: Thompson/Romney Dream: Santorum/Watts.
But you're talking about CREATING a table, right? I recall that you gave a tip for copying and pasting an existing table from a web page (without messing up the column alignment), correct?
It's soooo easy to miss closing tags in tables - I wonder if they'll wreak havoc if done incorrectly.
It's almost better off to tell people unfamiliar with HTML to just use <code> blocks and play with spacing manually.