Link to home
Start Free TrialLog in
Avatar of klopter
klopter

asked on

I would like a vertical font

I want to create a table with 20 to 30 columns.  The entries are just "+"or "-" so each column can be thin and I can get the whole thing to fit in about 800 pixels.  But, in order to do that I have to write the headings like this:

h      h
e      e
a      a
d      d
i      i
n      n
g      g
A      B

Rather ugly isn't it?  So, I'd like to be able to use a vertical font and write "headingA and "headingB" but still
have thin columns.

I need a simple solution that will work on most browsers and e-mail programs as I will be sending this table in an e-mailed document.  

Thanks,
  Ken
ASKER CERTIFIED SOLUTION
Avatar of webwoman
webwoman

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of webwoman
webwoman

You also might want to rethink how you're handling the data. It's very possible that this could be more useful broken up into smaller chunks, totals, or a text summary rather than individual +/- signs.
Using style sheets you could specify where you want each letter placed.  Adjusting the margin-top property will allow you to control the spacing between letters.  This is kind of a cumbersome workaround, and probably not what you had in mind, but it might do the trick in a pinch.  Also, keep in mind that NN4 doesn't really like negative top margins, and does not always behave predictably.

<head>
<style>
<!--
.TblHdr {
     font-family : Verdana, Arial, sans-serif;
      font-size : 10pt;
     margin-top: -22px;
     color : #800000;
     font-weight : bold;
     }
.char1 {
     font-family : Verdana, Arial, sans-serif;
      font-size : 10pt;
     color : #800000;
     font-weight : bold;
     }

-->
</style>
</head>

<body>
<table border="1" cellpadding="0">
  <tr>
     <td align="center" valign="bottom"><p class="char1">H</p>
       <p class="TblHdr">e</p>
         <p class="TblHdr">a</p>
       <p class="TblHdr">d</p>
       <p class="TblHdr">i</p>
       <p class="TblHdr">n</p>
       <p class="TblHdr">g</p>
       <p class="TblHdr">&nbsp;</p>
       <p class="TblHdr">A</p></td>
     <td align="center" valign="bottom"><p class="char1">N</p>
       <p class="TblHdr">a</p>
       <p class="TblHdr">m</p>
       <p class="TblHdr">e</p>
       <p class="TblHdr">s</p></td>
     <td align="center" valign="bottom"><p class="char1">A</p>
       <p class="TblHdr">d</p>
       <p class="TblHdr">d</p>
       <p class="TblHdr">r</p>
       <p class="TblHdr">e</p>
       <p class="TblHdr">s</p>
       <p class="TblHdr">s</p>
       <p class="TblHdr">e</p>
       <p class="TblHdr">s</p></td>
  </tr>
  <tr>
     <td>+</td>
     <td>-</td>
     <td>+</td>
  </tr>
</table>
</body>
</html>


HTH,
-Elliott

Avatar of knightEknight
<TABLE>
 <TR>
  <TH valign='top' width='10'>H e a d i n g 1</th>
  <TD valign='top'> This is some content</td>
 </tr>
 <TR>
 <TD>&nbsp;</td>
 </tr>
 <TR>
  <TH valign='top' width='10'>H e a d i n g 2</th>
  <TD valign='top'> This is some more content</td>
</table>
... the trick there is to set the width to 10 and put a space between each letter in your heading text so that it wraps after each letter.
And make it impossible to read... 20-30 columns of that would make somebody go blind ;-)

Rethink it or let them scroll. I'd prefer scrolling and reading to going blind....
>>> And make it impossible to read

Difficult as we might find it, that IS what the request was for.

Another (obvious) solution:
H<br>E<br>A<br>D<br>I<br>N<br>G<br>1

-corey
<TABLE BORDER=1><TR><TD WIDTH=1>V e r t i c a l<TD></TR></TABLE>
Well, actually, that WASN'T what they asked for. They KNOW how to do that...

>>Rather ugly isn't it?  So, I'd like to be able to use a vertical font and write "headingA and "headingB"
but still have thin columns.

There is no such thing. And no way to get it. I stand by my answer -- either rethink what you're doing or send it as Excel, where you CAN create headers that run at a 90 degree angle.
Do the heading as a graphic then:

<table>
<tr><td colspan="20"><img src=headings.gif" border="0">
</td></tr>
<tr>

...
etc
...

Cd&
webwoman,
< Well, actually, that WASN'T what they asked for. They KNOW how to do that...
  >>Rather ugly isn't it? ..
>

As I understand the questioner's "rather ugly",(s)he meant that each character has to be written separately, like in jello's suggestion.

Well, my suggestion actually does what was asked for (simple, and for any browser), it didn't exactly what was asked for: vertical font.
It gives a working solution, or name it workaround, and not the advice to think about the design (where we can have different opinions, but lets discuss this in the longe ;-)
>>>I need a simple solution

Sounds like COBOL has the easiest solution in making the heading a graphic.  Quick, painless, browser friendly & will work in any email programs that read HTML format.

Of course, I thought of it first, but didn't respond quick enough.  ;)
Avatar of klopter

ASKER

I was hoping for a different answer, but it is nice to know what one's options are.  I'll give some thought to both your Excel suggestion, though I believe that though all of my audience have access to Windows, some refuse to us it.  Recasting the information as fewer columns also makes sense.  But, I think that I will probably try to abbreviate my headings to 4 or 5 characters.

COBOLdinosaur, EricWestbo:  Can I really include .gif's in an e-mail message and expect them to be handled by an e-mai program?  

Thanks,
  Ken

BTW, I sent this html table to several of my friends and discovered that many e-mail programs, including a widely used installation of pine and an even more widely used installation of Eudora rendered it as garbage.  The pine instalation simply spat out the html.  The Eudora implementation ignored the body of the table.  Fortunately, my intended audience was able to read it.
Which is why I suggested Excel == not every mail client deals with HTML mail well, but just about all of them will handle an attachment. Then your users can decide what they want to do with it. And you can make the headings however you need.

Thanks for the A! ;-)