|
Audio Asylum Thread Printer Get a view of an entire thread on one page |
For Sale Ads |
In Reply to: Yes, thanks a lot posted by Eric LeRouge on May 04, 2003 at 07:29:46:
First, let me remind you how HTML tags work. These work in pairs. The first turns on the interpretation and the second turns it off. If you forget to use the second, you will affect all that follows, so you have to remember. An HTML tag is a word (or words) in angle brackets. If it's a word that is understood by the browser, then the action is performed; if not, then it does not appear.For example, I can go to into bold text with the <STRONG> tag and come back out with it's matching termination tag </STRONG>. And if I do this correctly, my text is bold. But if I made a spelling error and spelt the HTML tag as <STRING>, then it would not work. So if I write <STRING>correctly</STRING>, you just see
correctly .I tend to put HTML tags in upper case, although the engine is not case sensitive. And for XML and XHTML, lower case is the standard. Upper case makes them a little easier to see in this tutorial.
HTML tags sometimes consist of a number of words. The first word is the tag itself, and what follows are called attributes. These typically consist of a keyword, the equals sign, and something in double quotes. For example <TABLE BORDER="1"> is an HTML tag to start a table, and it says that the borders of the table have a width of one "border unit". If we used zero, the borders would be invisible.
1. A Table that's not a table
Because most browsers render text in a proportional font, attempts to line up columns of text or do ASCII art will not work unless you use a fixed width font. For example, I can tell the browser not to format my text using the <PRE> tag, draw my diagram, and then tell the browser to carry on formatting with the </PRE>. I have to make sure I use spaces and not tabs to align the columns, but it does work fine. Like so:<PRE>
Rank Title DVD-A CD
---------------------------------------------------
1. Queen / Night at the Opera 554 2,583
2. Eagles Hotel California 771 410
</PRE>2. The building blocks
Here are the HTML tags you need to know in order to write a simple table:- TABLE - this tag starts and finishes the whole table
- TR - table row. Your table has a number of rows.
- TD - table cell. Each row has a number of cells
- TH - like a cell but the text will be bold, so used for table headings.The important thing to note is you must count correctly, and each row must have the same number of cells. Or you will see an error in the display.
3. Developing and testing
The easiest way to build your table is to work outside of AA with (assuming Windows) Notepad and Internet Explorer. Just create a file on your hard drive called (say) test.html and write into it, save it, then you can open it up with IE. If you make some changes, save and simply refresh the open browser.When you have the table working correctly, remove all the carriage returns and select all, copy, and paste into your AA message window.
It's important to use the preview button in AA to check that everything is working correctly, and that you have not omitted a closing tag.
4. A Simple Table
So let's write a simple table with a heading, two columns, and three rows. I like to format these while I'm developing them with a bit of structure, but I remove all this and put it all on one line before posting to AA. If you don't do this, AA will insert a whole bunch of BR tags which will push your table down.<TABLE>
<TR>
<TH>Artist</TH><TH>Title</TH>
</TR>
<TR>
<TD>Queen</TD><TD>Night at the Opera</TD>
</TR>
<TD>Eagles</TD><TD>Hotel California</TD>
</TR>
</TABLE>
Artist Title Queen Night at the Opera Eagles Hotel California 5. Table with Borders
Well, that did not look very good but if we turn on the borders with the attribute BORDER="1" it will look better. So now I write:<TABLE BORDER="1">
<TR>
<TH>Artist</TH><TH>Title</TH>
</TR>
<TR>
<TD>Queen</TD><TD>Night at the Opera</TD>
</TR>
<TD>Eagles</TD><TD>Hotel California</TD>
</TR>
</TABLE>and we get
Artist Title Queen Night at the Opera Eagles Hotel California What do we notice? Well, the table sizes itself automatically to the widths of the columns. The text in the heading cells is center aligned while in the table cells it's left aligned.
Just one more thing, when using borders and you have a cell with nothing in it, you should put a "non breaking space" between the TD tags, or the borders will not be drawn around that cell. A non-breaking space is written like this:
So when we come to the "Jazz at the Movies" disc, with no artist, we need to make a table cell for the artist with a non-breaking space inside it. Table now becomes:
<TABLE BORDER="1">
<TR>
<TH>Artist</TH><TH>Title</TH>
</TR>
<TR>
<TD>Queen</TD><TD>Night at the Opera</TD>
</TR>
<TD>Eagles</TD><TD>Hotel California</TD>
</TR>
</TR>
<TD> </TD><TD>Jazz at the Movies</TD>
</TR>
</TABLE>and we see
Artist Title Queen Night at the Opera Eagles Hotel California Jazz at the Movies Obviously, this is just a start to the wonderful world of HTML tables. They are a lot of fun and I could rave on for hours. The best thing is, they are simple to practice with as you have the decoding engine you need - it's your browser.
Regards,
Metralla
Follow Ups:
.
Good basic introduction to HTML tables. Just one nit-pick:"The important thing to note is you must count correctly, and each row must have the same number of cells. Or you will see an error in the display."
Not necessarily, let's not forget the colspan and rowspan parameters within TD instructions (although I appreciate you were deliberately keeping things simple).
Indeed - COLSPAN is most effective. You also guessed my motives accurately.
Regards,
Metralla
ThanksThis is better than anything I found when I searched the Web for an introduction on HTML tables.
Best
It's a bit hard for me to write the tags so you can see them, and I messed up.I omitted the TR tag to start the row with "The Eagles" in it (twice), and I used a /TR tag to start the row with "Jazz at the Movies" in it.
Apologies - but you get the idea. You have to try it for yourself.
Regards,
Metralla
That last table should have looked like this:
Artist Title Queen Night at the Opera Eagles Hotel California Jazz at the Movies When using the preview message button, your non-breaking spaces will be converted to spaces and displayed in the message window, and then when you submit, they are gone. It's an issue.
Regards,
Metralla
Thank a lot MetrallaI'll practice these codes and try to include "professional" tables in my posts in the future, although the < PRE> option looks as an easy option for starters.
I'll do my best
(Geez, this place is like work now :)
Best
This post is made possible by the generous support of people like you and our sponsors: