Results 1 to 15 of 15
  1. #1
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Making Tables in the Lounge

    Sometimes, the best way to present information is in tabular format. The Lounge has long provided for a basic table, but the scripts now can recognize and convert more attributes for fancier tables. You don't need to use any of this, but someday, you might want to, and here's how.

    Default Table
    The <IMG SRC=http://www.wopr.com/w3timages/table.gif> icon on the 1-Click TagPanel inserts this table:
    <UL><table border=1><td>row1-col1</td><td>row1-col2</td><td>row2-col1</td><td>row2-col2</td></table>[/list]To understand how it is constructed, consider the following. It is very similar to standard HTML, but uses the square bracket "markup" tags rather than the angle brackets of HTML:
    <UL>Opening tag: <!t>[table border=1]<!/t> Tip: 0=borderless, >1 is fatter
    Start a row tag: <!t><!/t>
    Start a cell tag: <!t><!/t>
    End a cell tag: <!t><!/t>
    End a row tag:<!t><!/t>
    Closing tag: <!t>[/table]<!/t>[/list]Table with Merged Cells
    In some cases, you might want to create special effects such as a header across multiple columns, or a left-side or right-side cell that spans a set of rows. These now are possible with the manual addition of attributes to the default table tags.
    <UL><table border=1><td colspan=2>Cell that spans two columns, but only within one row.</td><td>row2-col1</td><td rowspan=2>Cell that spans 2 rows, but only within the same column.</td><td>row3-col1</td></table>[/list]Code for "Cell that spans two columns, but only within one row.": <!t>[td colspan=2]<!/t>
    Note: Cell occupies the "current" column plus the column to the right. If you use this code in the last column, the table will get wonky.

    Code for "Cell that spans two rows, but only within the same column.": <!t>[td rowspan=2]<!/t>
    Note: Cell occupies the "current" row plus the next row down. If you use this code in the last row, the table will get wonky.

    In either case, if you accidentally add a cell that the spanning cell is supposed to replace, it will get pushed over, and you will see the problem on a preview:
    <UL><table border=1><td colspan=2>Cell that spans two columns, but only within one row.</td><td>row1-col2</td><td>row2-col1</td><td rowspan=2>Cell that spans 2 rows, but only within the same column.</td><td>row3-col1</td><td>row3-col2</td></table>[/list]Table With Controlled Column Widths
    As you can see from the above, browsers generally resize HTML tables to fit their contents. This might not provide the most desirable alignment. You can manually set the desired proportion of each column.
    <UL><table border=1><td width=25%>Cell is 25% of browser-determined table width</td><td width=50%>Cell is 50% of browser-determined table width</td><td width=25%>Cell is 25% of browser-determined table width</td><td>Row2 follows the first row</td><td>Row2 follows the first row</td><td>Row2 follows the first row</td></table>[/list]Code for this: <!t>[td width=25%]<!/t> etc.

    If you want to constrain the overall width of your table in relation to the page, you can put a width=n% attribute in the <!t>[table]<!/t> tag, alongside the border attribute. Note that this is not what the column widths add up to, it is how wide the table is in relation to the margins of whatever the browser is working with.

    The column widths need to add to 100%, or the browser will "round them up" to their respective proportions of 100%. If you omit the width attribute from a cell in a row where the others have their width attribute set, the result is somewhat unpredictable. The browser might give the cell with no specified width whatever you left over, or it might just treat the attributes you set as a minimum and round them up as it sees fit. Conversely, if you set widths that add to more than 100%, the browser might do any number of things.

    Finally, if you want to assign "hard" pixel width values to your columns rather than percentages, you can, but you need to assign the total of these widths to the table width attribute or they will not be honored. Also, people who use big fonts might be unhappy, so it should be used only under special circumstances.

    Horizontal Alignment of Cell Contents
    By default, cell contents are left-aligned. This, too, can now be set in the cell tags:
    <UL><table border=1 width=50%><td align=center>[b]Used DVDs for Sale[b]</td><td align=right>USD</td><td align=middle>Who Am I? Starring Jackie Chan</td><td align=right>12.95</td><td align=center>Traffic</td><td align=right>15.95</td><td align=middle>A Beautiful Mind Best Picture, 2001 (2 disc set)</td><td align=right>18.95</td></table>[/list]Code for this: <!t>[td align=center]<!/t> (or middle) or right or left, as the case may be...

    Control Vertical Alignment
    Undocumented hack! Well, maybe it was obvious, but Eileen didn't demo it in her post. You will have noticed in the above examples that your browser vertically centers text that is not tall enough to fill its cell. To force the text to the top, as you would expect if you are familiar with HTML tables, the code is:

    <!t>[td valign=top]<!/t>

    One can mix and match these tags, but... if you are creating something incredibly complex, it is a <big>very good idea</big> to do it in Notepad or another editor just in case something goes wrong with your Internet connection, the Lounge server, etc., to avoid losing your creation. Hope this helps. Remember... it should be fun!

    <center>


    <table border=5><td rowspan=2 width=33% align=center>A</td><td colspan=2 align=center>B</td><td width=33% align=center> <img src=/S/wink.gif border=0 alt=wink width=15 height=15></td><td rowspan=2 width=33% align=center>C</td><td colspan=2 align=center>D</td></table></center>

  2. #2
    Bronze Lounger
    Join Date
    Feb 2001
    Location
    England
    Posts
    1,306
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Making Tables in the Lounge

    Nice one, Jeff. However, I prefer my tables to have Queen Anne legs and walnut veneer. See to it. <img src=/S/devil.gif border=0 alt=devil width=15 height=15>

  3. #3
    Plutonium Lounger
    Join Date
    Mar 2002
    Posts
    84,353
    Thanks
    0
    Thanked 29 Times in 29 Posts

    Re: Making Tables in the Lounge

    <table border = 3><td colspan=2>Top Left</td><td rowspan=2>Top Right</td><td rowspan=2>Bottom Left</td><td>Center</td><td colspan=2>Bottom Right</td></table><IMG SRC=http://www.tablelegs.com/nimages/100-DBCw_top.jpg>

  4. #4
    Silver Lounger
    Join Date
    Dec 2000
    Location
    Los Angeles, California, USA
    Posts
    1,734
    Thanks
    0
    Thanked 3 Times in 1 Post

    Re: Making Tables in the Lounge

    Or how's about:
    <table border=1 align=center><td><IMG SRC=http://www.tablelegs.com/nimages/100-DBCw_top.jpg></td></table>
    <IMG SRC=http://www.wopr.com/w3tuserpics/Eileen_sig.gif>

  5. #5
    Plutonium Lounger
    Join Date
    Nov 2001
    Posts
    10,550
    Thanks
    0
    Thanked 7 Times in 7 Posts

    Re: Making Tables in the Lounge

    Or even...

    <table border=10><td colspan=3 Align=Center>Top</td><td>Left</td><td><IMG SRC=http://www.tablelegs.com/nimages/100-DBCw_top.jpg></td><td>Right</td><td colspan=3 Align=Center>Bottom</td></table>

  6. #6
    Platinum Lounger
    Join Date
    Dec 2000
    Location
    Hornsby Heights, New South Wales, Australia
    Posts
    3,822
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Making Tables in the Lounge

    Or, considering it's SysAdmin Day:
    <table border=0><tr><td width=254><marquee SCROLLAMOUNT=2 SCROLLDELAY=2 LOOP=INFINITE WIDTH="90%" BEHAVIOR=ALTERNATE DIRECTION="RIGHT">
    <marquee SCROLLAMOUNT=2 SCROLLDELAY=2 LOOP=INFINITE WIDTH="90%" BEHAVIOR=ALTERNATE DIRECTION="LEFT">

    </marquee>
    </marquee></td></table>
    <img src=/S/evilgrin.gif border=0 alt=evilgrin width=15 height=15>
    Cheers, Claude.

  7. #7
    Plutonium Lounger
    Join Date
    Mar 2002
    Posts
    84,353
    Thanks
    0
    Thanked 29 Times in 29 Posts

    Re: Making Tables in the Lounge

    Or a very leggy table:

    <table border=1><td><IMG SRC=http://www.tablelegs.com/nimages/100-DBC.jpg></td><td><IMG SRC=http://www.tablelegs.com/nimages/100-EBC.jpg></td><td><IMG SRC=http://www.tablelegs.com/nimages/100-CBC.jpg></td><td><IMG SRC=http://www.tablelegs.com/nimages/100-D.jpg></td><td><IMG SRC=http://www.tablelegs.com/nimages/100-E.jpg></td><td><IMG SRC=http://www.tablelegs.com/nimages/100-C.jpg></td><td><IMG SRC=http://www.tablelegs.com/nimages/100-P.jpg></td><td><IMG SRC=http://www.tablelegs.com/nimages/100-S.jpg></td><td><IMG SRC=http://www.tablelegs.com/nimages/100-H.jpg></td><td><IMG SRC=http://www.tablelegs.com/nimages/100-C36.jpg></td></table>

  8. #8
    Silver Lounger
    Join Date
    Dec 2000
    Location
    Los Angeles, California, USA
    Posts
    1,734
    Thanks
    0
    Thanked 3 Times in 1 Post

    Re: Making Tables in the Lounge

    Hey, you shouldn't be able to *do* that <img src=/S/exclamation.gif border=0 alt=exclamation width=15 height=15>
    <IMG SRC=http://www.wopr.com/w3tuserpics/Eileen_sig.gif>

  9. #9
    Platinum Lounger
    Join Date
    Dec 2000
    Location
    Hornsby Heights, New South Wales, Australia
    Posts
    3,822
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Making Tables in the Lounge

    You can't, not unless it's SysAdmin Day *and* you're a SysAdmin <img src=/S/smile.gif border=0 alt=smile width=15 height=15> <img src=/S/flee.gif border=0 alt=flee width=25 height=25>
    Cheers, Claude.

  10. #10
    Uranium Lounger
    Join Date
    Dec 2000
    Location
    Salt Lake City, Utah, USA
    Posts
    9,508
    Thanks
    0
    Thanked 6 Times in 6 Posts

    Re: Making Tables in the Lounge

    For spreadsheeters

    <!t>[table border=1]<!/t>
    <!t><!/t>
    <!t><!/t><!t>[tab]<!/t><!t><!/t>
    <!t><!/t><!t>[tab]<!/t>A<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>B<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>C<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>D<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>E<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>F<!t><!/t>
    <!t><!/t>
    <!t><!/t>
    <!t><!/t><!t>[tab]<!/t>1<!t>[tab]<!/t><!t><!/t>
    <!t><!/t><!t>[tab]<!/t>1A<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>1B<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>1C<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>1D<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>1E<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>1F<!t><!/t>
    <!t><!/t>
    <!t><!/t>
    <!t><!/t><!t>[tab]<!/t>2<!t>[tab]<!/t><!t><!/t>
    <!t><!/t><!t>[tab]<!/t>2A<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>2B<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>2C<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>2D<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>2E<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>2F<!t><!/t>
    <!t><!/t>
    <!t><!/t>
    <!t><!/t><!t>[tab]<!/t>3<!t>[tab]<!/t><!t><!/t>
    <!t><!/t><!t>[tab]<!/t>3A<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>3B<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>3C<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>3D<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>3E<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>3F<!t><!/t>
    <!t><!/t>
    <!t><!/t><!t>[tab]<!/t>4<!t>[tab]<!/t><!t><!/t>
    <!t><!/t><!t>[tab]<!/t>4A<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>4B<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>4C<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>4D<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>4E<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>4F<!t><!/t>
    <!t>[/tr]<!/t>
    <!t><!/t><!t>[tab]<!/t>5<!t>[tab]<!/t><!t><!/t>
    <!t><!/t><!t>[tab]<!/t>5A<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>5B<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>5C<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>5D<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>5E<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>5F<!t><!/t>
    <!t>[/tr]<!/t>
    <!t>[/tr]<!/t>
    <!t><!/t><!t>[tab]<!/t>6<!t>[tab]<!/t><!t><!/t>
    <!t><!/t><!t>[tab]<!/t>6A<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>6B<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>6C<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>6D<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>6E<!t><!/t>
    <!t><!/t><!t>[tab]<!/t>6F<!t><!/t>
    <!t>[/tr]<!/t>
    <!t>[/table]<!/t>

    will return

    <table border=1><td> </td><td> A</td><td> B</td><td> C</td><td> D</td><td> E</td><td> F</td><td> 1 </td><td> 1A</td><td> 1B</td><td> 1C</td><td> 1D</td><td> 1E</td><td> 1F</td><td> 2 </td><td> 2A</td><td> 2B</td><td> 2C</td><td> 2D</td><td> 2E</td><td> 2F</td><td> 3 </td><td> 3A</td><td> 3B</td><td> 3C</td><td> 3D</td><td> 3E</td><td> 3F</td><td> 4 </td><td> 4A</td><td> 4B</td><td> 4C</td><td> 4D</td><td> 4E</td><td> 4F</td></tr><td> 5 </td><td> 5A</td><td> 5B</td><td> 5C</td><td> 5D</td><td> 5E</td><td> 5F</td></tr></tr><td> 6 </td><td> 6A</td><td> 6B</td><td> 6C</td><td> 6D</td><td> 6E</td><td> 6F</td></tr></table>

    (If I have this correct.) Perhaps this will be useful for someone other than me.
    -John ... I float in liquid gardens
    UTC -7ąDS

  11. #11
    Silver Lounger Bruce K's Avatar
    Join Date
    Apr 2002
    Location
    Phoenix, Arizona, USA
    Posts
    1,876
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Making Tables in the Lounge

    I'm no dummy, but, well, simply, I was reluctant to ask before as tables usually escaped me. Thank you Jefferson for a simple layout of the basics that can help me here as well as w/ my HTML.

  12. #12
    5 Star Lounger
    Join Date
    Feb 2001
    Location
    Youngstown, Ohio, USA
    Posts
    705
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Re: Making Tables in the Lounge

    Careful! Showing that much bare leg in a 'lounge' setting might get us labelled a porn site! <img src=/S/rofl.gif border=0 alt=rofl width=15 height=15>

  13. #13
    Bronze Lounger
    Join Date
    Feb 2001
    Location
    England
    Posts
    1,306
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Making Tables in the Lounge

    I shoulda known better..... Brilliant responses, though. Now, would anyone like to sell me one....

  14. #14
    Silver Lounger
    Join Date
    Dec 2000
    Location
    Los Angeles, California, USA
    Posts
    1,734
    Thanks
    0
    Thanked 3 Times in 1 Post

    Re: Making Tables in the Lounge

    ...a bare leg? <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    <IMG SRC=http://www.wopr.com/w3tuserpics/Eileen_sig.gif>

  15. #15
    Bronze Lounger
    Join Date
    Feb 2001
    Location
    England
    Posts
    1,306
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Making Tables in the Lounge

    Gee Mrs W, thanks for the offer. But no. I can't handle it. Green, yes: scaly, definitely. But warts? Not this side of the Permian. [shudder]

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •