HTML Hell! Help! How the heck

can I insert tabs into a document?

I need to have two columns evenly spaced. I don’t want to use tables for this. Other than putting in the right number of <sp> codes in every line, is there a way I can just insert something that approximates a tab?

Thanks!

Fenris

There’s no command in HTML that allow the author to set tabs.

If you don’t want to use tables, another option is to create a transparent GIF and insert it between the columns. Make the GIF one pixel in size, and use height and width tags to stretch it to the size you want.

Or just use tables, it’s not that hard.

For simple text that you’re content to have appear in constant-width font, tabs are honored inside of <PRE>, though you are at the mercy of the stops set by the browser. If your objection to tables is perceived difficulty, I would agree, just use the table. If you have other objections to the tables, like you are already nested enough tables deep that another one will make Netscape perform badly, you have my sympathies.

Here’s the thing. I’m already using a table, I need tabs or columns or something within one cell of the table.

For example:


************************************
*   *  AAAAAAA  <tab?>  BBBBBBB    *
* 1 *  AAAAAAB  <tab?>  BBBBBBC    *
*   *  AAAAAAC  <tab?>  BBBBBBD    *	
************************************
*   *  CCCCCCA  <tab?>  DDDDDDA    *
* 2 *  CCCCCCB  <tab?>  DDDDDDB    *
*   *  CCCCCCC  <tab?>  DDDDDDC    *
************************************

etc...

There’s gotta be a way to do this without using a bunch of <sp> codes.

Doesn’t there?

Fenris

Tables may be nested with table cells.

<TABLE> … <TD><TABLE><TR><TD> … </TABLE></TD> … <TABLE>

You will note that the SDMB pages exhibit multiple levels of table nesting.

So just put another table (with two columns) inside that cell.

Instead of putting both AA column and BB column inside a single cell in the original table, why don’t you make each its own separate column?


************************************
*   *  AAAAAAA  *       BBBBBBB    *
* 1 *  AAAAAAB  *       BBBBBBC    *
*   *  AAAAAAC  *       BBBBBBD    *	
************************************
*   *  CCCCCCA  *       DDDDDDA    *
* 2 *  CCCCCCB  *       DDDDDDB    *
*   *  CCCCCCC  *       DDDDDDC    *
************************************

Because I want a border between the first and second cell, but I don’t want a border between column AA and column BB, and I don’t think you can selectively turn the border on and off.

Fenris

There’s an extra table since I like borders with colors and border colors aren’t NS compliant. This should do it though.

Note that since I’m using a different table for each row of data (the AAAAAAAs and BBBBBBs) that if the string for A is longer/shorter than the length of the string for C that the columns won’t be the same width. If this is an issue, let me know and I’ll fix it. This is my quick fix though. :slight_smile:

<table border=0 cellspacing=0 cellpadding=0>
<tr><td bgcolor=#000000>
<table border=0 cellpadding=2 cellspacing=1>
<tr bgcolor=#ffffff>
<td>1</td>
<td>
<table border=0 cellpadding=2 cellspacing=0>
<tr><td>AAAAAAA<br>AAAAAAA<br>
</td>
<td width=50><img src=“spacer.gif” width=50 height=1></td>
<td>
BBBBBBB<br>BBBBBBB<br>
</td></tr>
</table>
</td></tr>
<tr bgcolor=#ffffff>
<td>2</td>
<td>
<table border=0 cellpadding=2 cellspacing=0>
<tr><td>CCCCCCC<br>CCCCCCC<br>
</td>
<td width=50><img src=“spacer.gif” width=50 height=1></td>
<td>
DDDDDDD<br>DDDDDDD<br>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>

In that case, just create a two-column table inside that cell with border=0

Create a fixed width cell wider than you need it (i.e. "TD WIDTH=“200"” or whatever).

Damn, the board takes out all of my indenting. That’s ugly, and I apologize. There’s one variant of the code that’ll use plain (and ugly) browser borders. Just set the border in the second table to 1 and take out the first two and last two lines of code. This’ll speed it up ever so slightly in Netscape.

I just thought up a variant that will get rid of the column width issue I mentioned before. It gets rid of cellpadding in the process though, so it may not be as pretty as you want.

<table border=0 cellspacing=0 cellpadding=0>
<tr><td bgcolor=#000000>
<table border=0 cellpadding=0 cellspacing=1>
<tr bgcolor=#ffffff>
<td>1</td>
<td rowspan=2>
<table border=0 cellpadding=0 cellspacing=0>
<tr><td>AAAAAAA<br>AAAAAAA<br>
</td>
<td width=50><img src=“spacer.gif” width=50 height=1></td>
<td>
BBBBBBB<br>BBBBBBB<br>
</td></tr>
<tr bgcolor=#000000><td colspan=3 width=100%><img src=“spacer.gif” width=1 height=1></td></tr>
<tr><td>CCCCCCC<br>CCCCCCC<br>
</td>
<td width=50><img src=“spacer.gif” width=50 height=1></td>
<td>
DDDDDDD<br>DDDDDDD<br>
</td></tr>
</table>
</td></tr>
<tr bgcolor=#ffffff>
<td>2</td>
</tr>
</table>
</td></tr>
</table>

KKBattousai

Geez! Thank you! You saved me hours of figuring out how to embed a table. :slight_smile:

I have one question: what controls the height of the first cell? I’d have thought it was linked to the height of the second cell, but it doesn’t seem to be. I’m ending up with something that looks like this:


*******************
*   *  AAA    BBA *
*   *  AAB    BBB *
* 1 *  AAC    BBC *
*   *  AAD    BBD *
*****  AAE    BBE *
*   *  AAF    BBF *
*   *  AAG    BBG *
* 2 * *************
*   *  CCA    DDA *
*   *  CCB    DDB *
*****  CCC    DDC *
*   *  CCD    DDD *
*   ***************
* 3 *  EEA    FFA *

etc

I thought putting some <br>s before and after the “1” would solve the problem, but it still doesn’t line up the horizontal bar at the bottom of cell 1 and cell two (although it helps). Any way to force the vertical height of cell one to match the vertical height of cell two?

And, thanks again. I’m learning a ton and I really appreciate the help!

Fenris

Aaargh, I meant to ask this in the last post:

One other question: Why “spacer.gif”? I don’t understand how it’s working, since I don’t have a spacer.gif on my system. I tried changing the name and it still worked, so I assume it’s just a way to trick the table into putting in a fixed-size blank spaces, but why aren’t we getting a “file not found” error? I see what it’s doing but I don’t understand why it’s working.

Thanks!

Fenris

Hm, what’s controlling the height of the columns? Nothing, because I’m a damn fool. (That’s what I get for testing things on only 2 lines of data.) I’ll need to work on that, but for now you’ll have to use my first example. Like I said, if all the columns are going to be of the same width, it shouldn’t matter. Otherwise, well, I’ll figure something out in the next few minutes (hopefully).

As for spacer.gif, it’s the filename usually given to the transparent gif MWI was talking about. I believe it doesn’t return a file not found (which, for graphics, would be the red X looking thing) since it’s too small to really show. FTR, you should have a 1x1 transparent gif made just in case. (I can email you one if you need it.)

I’ll fix my code in a minute. :slight_smile:

Well, Fenris it’s been a long day, so the best advice I can come up with now is to use my original chunk of code, with the single alteration of changing the <td> cells for the cells with data in them to <td valign=“top”>. This will bring all the numbers to the top which should be better if one column will have more info than the column next to it.

spacer.gif

Here’s a link to a site that has an example using a combination of HTML and JavaScript to approximate tabs.