OVER TABLE alignment problem

Hi,

I am using the OVER command to display the fields in vertical order in my table.I have used the
ON TABLE HOLD AS XYZ FORMAT HTML
command to displayed its value in
HTMLBEGIN
!IBI.FIL.XYZ;
HTMLEND

But the alignment of fields is not proper.The labels are displayed on the far left while the data is displayed on the far right.Also i needed to reduce the width of the table.Is there any way to achieve this.

Regards,
Aditya

Posts: 84 | Registered: June 05, 2006

Tony A

Expert

posted

Hide Post

One method (amongst many) is that as your output is HTML you can use CSS either embedded in your HTMLFORM or by using an external CSS file.

T

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

Aditya

Gold member

posted

Hide Post

Thanks Tony,

Can you give me an example.

Aditya

Posts: 84 | Registered: June 05, 2006

Ignored post by Aditya posted

Show Post

Tony A

Expert

posted

Hide Post

Ok, a quick example but I would advise you to have a look around for a good book on CSS or have a search on the web as there are some very good sites out there (there are equally some really bad ones as well!)

TABLE FILE CAR
 SUM RCOST AS 'Cost to End Buyer'
OVER DCOST AS 'Cost to Dealer'
OVER COMPUTE Profit/D9 = RCOST - DCOST; AS 'Profit'
BY COUNTRY
BY CAR
BY MODEL
ON TABLE SET PAGE-NUM NOPAGE
ON TABLE HOLD AS MYTABLE FORMAT HTMTABLE
ON TABLE SET STYLE *
TYPE=TITLE, COLUMN=RCOST,  CLASS=Title_Col1, $
TYPE=TITLE, COLUMN=DCOST,  CLASS=Title_Col2, $
TYPE=TITLE, COLUMN=Profit, CLASS=Title_Col3, $
TYPE=DATA, COLUMN=RCOST,  CLASS=Data_Col1, $
TYPE=DATA, COLUMN=DCOST,  CLASS=Data_Col2, $
TYPE=DATA, COLUMN=Profit, CLASS=Data_Col3, $
ENDSTYLE
END
-RUN

-HTMLFORM BEGIN
<html>
<head>
<title>CSS Example</title>
<style>
 .Title_Col1 {width:100px; font-family:Tahoma; font-size:8pt; font-weight:bold; color:#00ff00;
              background-color:#ffffff; text-align:left;}
 .Title_Col2 {width:120px; font-family:Arial; font-size:8pt; font-weight:bold; color:#0000ff;
              background-color:#ffffff; text-align:center;}
 .Title_Col3 {width:140px; font-family:Courier; font-size:8pt; font-weight:bold; color:#ff0000;
              background-color:#ffffff; text-align:right; border-style: NONE;}
 .Data_Col1 {width:100px; font-family:Tahoma; font-size:14pt; font-weight:bold; color:#00ff00;
             background-color:#ffffff; text-align:left;}
 .Data_Col2 {width:120px; font-family:Arial; font-size:12pt; font-weight:bold; color:#0000ff;
             background-color:#ffffff; text-align:center;}
 .Data_Col3 {width:140px; font-family:Courier; font-size:10pt; font-weight:bold; color:#ff0000;
             background-color:#ffffff; text-align:right; border-style: NONE;}
</style>
</head>
<body>
!IBI.FIL.MYTABLE;
</body>
</html>
-HTMLFORM END

Note that you can use the WebFOCUS stylesheet syntax to assign a CLASS to a particular column etc. and the CLASS relates to the section within the CSS style in the HTML.

Also note that you should use FORMAT HTMTABLE as opposed to FORMAT HTML as the HTMTABLE expects the main HTML tags to be supplied and therefore does not override the STYLE tags you include in your HTMLFORM.

If you run the above with FORMAT HTML then you will NOT see the CSS styling.

T