|
|
www.htmlgoodies.com/tutorials/tables/article.php/3479821
By Joe Burns January 4, 2005 This tutorial was originally written when HTML 4.0 was in its infancy. HTML 4.01 is today's standard specification for HTML and this tutorial has been updated to reflect the features of HTML 4.01. Editorial comments are shown contained in square braces -- [ ] Use these to jump around or read it all... [The Tags] [The TABLE Tag] [The COLGROUP Tag] [The TBODY Tag] [The TD Tag] [The TH and TR Tags] [The THEAD Tag] [The TFOOT Tag] [Event Handlers] HTML 4.0 is becoming the standard. As of the writing of this tutorial, Microsoft Explorer version 5.0 is out with full HTML 4.0 support. Netscape Navigator 5.0 is not far behind, and soon the commands below will start to become mainstream. {HTML 4.01 is now the standard for HTML. All commonly used modern browsers fully support the HTML 4.01 specification.} Here's a quick look at how HTML 4.01 affects tables. You are already familiar with some of the tags and attributes. For example, BORDERCOLOR has been in use for a while as a proprietary Internet Explorer tag. It has just now been written into the HTML 4.01 code. I have offered as many examples as possible. Many will simply not work because you don't yet have the browser version that supports it. Don't worry, neither did I when I wrote this tutorial. Hopefully you'll be able to visit this tutorial in the future to test what your new browser will and will not do. I am only going to hit the tags and attributes new through HTML 4.01 in this tutorial. If you'd like to get into the basics of table creation, start with my table tutorials. Not to sound like a broken record, but remember that just because you have a browser that supports these commands, doesn't mean your viewers do, too. Write simply and use what you need, not what's available.
The TagsHere are the tags and attributes we'll hit in this tutorial:
In order to demonstrate each of these commands, we'll work with this very simple table format:
The <TABLE> TagThe TABLE tag begins the process of building a table. It already carries a long list of attributes, including BORDER CELLPADDING, CELLSPACING, WIDTH, and ALIGN. Here we'll look at some of the new HTML 4.01 attributes. BORDERCOLORThis command was first supported by Netscape Navigator (NN) version 4 and Microsoft's Internet Explorer (IE) version 3, but has just now been made standard by the World Wide Web Consortium (W3C) in HTML 4.01. Here's what it looks like. I added the BORDER="3" to have something to color:
...and here's the effect:
DATAPAGESIZE/DATASRCThese two commands are not standard HTML 4.01 according to the W3C. They are proprietary attributes from the utility research kitchens at Microsoft. Although they really don't belong in this tutorial, I thought I'd quickly tell you what they do. Both of these commands deal with data binding in IE. Let's say you are displaying data on your page from another database. Sometimes you'll require three columns and another time you'll require four columns.
FRAMEThis is used along with the BORDER attribute. The FRAME command allows you to state which portions of the border will render (display). Here are the values available:
Here's what it looks like:
...and here's the effect:
RULESThis, like FRAME, also works with the BORDER attribute, except RULES deals with the inside border edges.
Here's what it looks like:
...and here's the effect:
SUMMARYThis allows you to denote a summary of what type of data the table contains. It will act much like an image's alt command for non-visual and text-based browsers.Here's what it looks like:
...and here's the effect:
Event HandlersNew in HTML 4.01 is the ability for a TABLE itself to be active in terms of the mouse and keyboard. The TABLE tag can now accept and render the Event Handlers onBlur, onClick, onDblClick, onDragStart, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, and onScroll.Here's what it looks like:
...and here's the effect (click on it):
The <COLGROUP> TagThe COLGROUP command allows you to set parameters to entire columns of data in a table. It is best for setting up widths, colors, and Style Sheet effects.ALIGNThis is a well-known attribute that is now part of the COLGROUP tag. Plus it's a good demonstration of what the command can do:Here's what it looks like:
...and here's the effect:
CHAR/CHAROFFThis works with the ALIGN attribute. The CHAR attribute allows you to set a specific text character as an alignment point. The CHAROFF attribute allows you to then offset the text character in percentages of the cell width.This will allow you to align a series of numbers at the decimal point. <COLGROUP ALIGN="char" CHAR="." CHAROFF="50%">
SPANThis attribute allows the COLGROUP attributes to span across adjacent columns. Since I have only two, I'll have the SPAN go across one more column. That is a total of 2.Here's what it looks like:
...and here's the effect:
WIDTH and VALIGNYou are probably well aware of these two attributes. Width can be set in either pixels or percentages.VALIGN sets the cell text's alignment in a vertical sense. You can set it to top, bottom, or middle. Here's what it looks like:
...and here's the effect:
The <TBODY> TagThe TBODY tag acts similarly to the COLGROUP tag, but the TBODY is more useful in that it will allow you to surround some or all the cells you want. You do not need to deal with a full column. Think of this as a BODY command used inside of a table.The command will handle the ALIGN, CHAR, CHAROFF, and VALIGN attributes we've already covered. In addition, the TBODY tag will allow the BGCOLOR attribute. I'll use that to show it off. Here's what it looks like:
...and here's the effect:
The <TD> TagThe TD tag is the workhorse of the table. It denotes Table Data. Here, we'll look at the HTML 4.01 attributes new to the tag.ABBRThis is a great new command. It acts as a rollover that pops up a tool tip box when the mouse rests upon the cell. It's a great way to add data. In the example, rest your pointer on the top left table cell.Here's what it looks like:
...and here's the effect:
AXISThis provides non-visual browsers a brief label to describe the cell's data. It follows the same format as above:<TD AXIS="description of cell">Cell Data</TD>
CHAR/CHAROFFThis works that same way as described above. It looks like this:<TD ALIGN="char" CHAR="." CHAROFF="45%">
HEADERSThis is another command that works mainly with non-visual browsers. You will set up a series of <TH> (Table Head) commands, then attach the header to each table data cell. For example:
<TABLE>
SCOPEThe SCOPE attribute sets aside sections of a table to act as the TD that possessed the attributes. Let's say you have a top left cell that has a pink background. You could then set the SCOPE to one of four values:
For example:
<TABLE>
The <TH> and <TR> TagsI am grouping these two tags together because everything that is new to them has been covered above.
THIt stands for Table Header. It will accept the same six new commands as the <TD> command above. They are:
TRIt stands for Table Row. The new attributes will be very helpful in creating future tables. And the good part is, you're familiar with all of them. They're just new to the TR tag in HTML 4.01 They are:
The <THEAD> CommandThe THEAD tag is new to HTML 4.01. It has a couple of special implementation concerns. You can only have one thead in a table, and the main <THEAD> command must follow the main Table command. Get it? It's a lot like a HEAD tag in an HTML document. Past that, you can group together as many cells as you'd like. It's a great way to set an entire table's attributes in one shot.Here's what it looks like:
...and here's the effect:
The THEAD tag will handle these attributes:
The <TFOOT> TagThis command is also new to HTML 4.01. The TFOOT tag works like the THEAD command to set aside related cells, and, like the THEAD tag, is only allowed once in a table. TFOOT must follow the THEAD commands, and must precede the TBODY commands (if any are used). It basically acts as a footer for the Head portion of the Table.The Tag supports the following attributes:
Event HandlersOne of the overriding new attributes to all of these elements is the ability to evoke JavaScript Event Handlers. Each of the tags can have one of many different events embedded.The process is described in terms of the <TABLE> tag section. You can jump right to it to re-read. Each element in this tutorial can be altered in just the same way. That's ThatHTML 4.01 is now the standard across the Web. You've just read through the new commands for your tables. Use them to improve your tables today!Try these other HTML 4.01 pieces:
Enjoy!
[The Tags] [The TABLE Tag] [The COLGROUP Tag] [The TBODY Tag] [The TD Tag] [The TH and TR Tags] [The THEAD Tag] [The TFOOT Tag] [Event Handlers]
|