Home
AudioAsylum Trader
Audio Asylum Thread Printer

Get a view of an entire thread on one page

For Sale Ads

FAQ / News / Events

 

DVD-Audiobahn

HTML tables - an introduction

24.219.10.19

[ Follow Ups ] [ Post Followup ] [ Thread:  Display  Email ] [ DVD-Audiobahn ] [ FAQ ]

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>

ArtistTitle
QueenNight at the Opera
EaglesHotel 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

ArtistTitle
QueenNight at the Opera
EaglesHotel 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:

&nbsp;

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>&nbsp;</TD><TD>Jazz at the Movies</TD>
</TR>
</TABLE>

and we see

ArtistTitle
QueenNight at the Opera
EaglesHotel 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: