Beautify your tables views with CSS

Published on by Yousfi Benameur

Genhtml.prg was the first VFP code to build an html  table from any  table/cursor.this have no colors,no great style (css dont known in this period).
the web table is built with markers. : <table>,<tr>,<td>...
This small code  can build an html web view of any table using CSS web technology.

i chose the customer vfp table (located in samples\data) but you cando it with  the mechanism of select statement

use any table,selecting fields you want to do the same goal.the code is independent of the table, simple change the cusor in form.load.
i made 5 styles in the demo.you can extend to any style you want (google there is tons of css tables and even  css generators online)..
I used the vfp IE browser (emulated ie11) for this purpose.
select the code,CTRL+C, paste into a prg file and then run.

See the 5 demo styles produced by the code in the screenshots below.

 

*1*

*Begin code
Publi yform
yform=Newobject("ycsstable")
yform.Show
Read Events

*
Define Class ycsstable As Form
    Height = 479
    Width = 814
    ShowWindow = 2
    AutoCenter = .T.
    Caption = "Beautify vfp Tables with CSS"
    Name = "Form1"

    Add Object olecontrol1 As OleControl With ;
        Oleclass="Shell.explorer.2",;
        Top = 0, ;
        Left = 0, ;
        Height = 480, ;
        Width = 816, ;
        Anchor = 15, ;
        Name = "Olecontrol1"

    Procedure ybuild
        Lparameters xstyle
        If Pcount()=0
            xstyle=1
        Endi

        *set styles can add any style colors (or customize fontname,fontsize dimensiosn in CSS)
        With Thisform
            Do Case

                Case xstyle=1  &&default style fired  if not 2,3,4,5
                    .ycolor1="#d3e9ff"  &&hover TD color
                    .ycolor2="#aad4ff"  &&TD background color
                    .ycolor3="#000000"  &&TD forecolor
                    .ycolor4="#0057af"  &&tr:first-child td color
                    .ycolor5="#ffffff"  &&t:first forecolor
                    .yfontsize="10"     &&fontsize

                Case xstyle=2
                    .ycolor1="#DEB887"  &&hover TD color
                    .ycolor2="#FFE4C4"  &&TD background color
                    .ycolor3="#8B0000"  &&TD forecolor
                    .ycolor4="#4B0082"  &&tr:first-child td color
                    .ycolor5="#FFF8DC"  &&t:first forecolor
                    .yfontsize="12"     &&fontsize

                Case xstyle=3
                    .ycolor1="#228B22"  &&hover TD color
                    .ycolor2="#FFEBCD"  &&TD background color
                    .ycolor3="#800080"  &&TD forecolor
                    .ycolor4="#AFEEEE"  &&tr:first-child td color
                    .ycolor5="#B22222"  &&t:first forecolor
                    .yfontsize="12"     &&fontsize

                Case xstyle=4
                    .ycolor1="#DCDCDC"  &&hover TD color
                    .ycolor2="#F0CECE"  &&TD background color
                    .ycolor3="#4B0082"  &&TD forecolor
                    .ycolor4="#0000FF"  &&tr:first-child td color
                    .ycolor5="#FFE4C4"  &&t:first forecolor
                    .yfontsize="10"     &&fontsize

                Case xstyle=5
                    .ycolor1="#FFF3B2"  &&hover TD color
                    .ycolor2="#EFD9A1"  &&TD background color
                    .ycolor3="#00008B"  &&TD forecolor
                    .ycolor4="#8B0000"  &&tr:first-child td color
                    .ycolor5="#FFEBCD"  &&t:first forecolor
                    .yfontsize="11"     &&fontsize

            Endcase

        Endwith

        *build the html table with style set.
        Local m.xx,m.cr
        m.cr=Chr(13)

        TEXT to m.xx noshow
        <div class="CSSTable" >
              <table >
              <tr>
        ENDTEXT
        For i=1 To Fcount()
            m.xx=m.xx+"<td>"+Allt(Field(i))+"</td>"
        Endfor
        m.xx=m.xx+"</tr>"+cr

        Scan
            m.xx=m.xx+"<tr>"
            For i=1 To Fcount()
                m.xx=m.xx+"<td>"+Trans(Eval(Allt(Field(i))))+"</td>"
            Endfor
            m.xx=m.xx+"</tr>"+cr
        Endscan
        m.xx=m.xx+"</table>"+cr+"</div>"

        Local m.myvar
        TEXT to m.myvar textmerge noshow

        <style>
        .CSSTable {
            margin:0px;padding:0px;
            width:50%;
            box-shadow: 10px 10px 5px #888888;
            border:1px solid #ffffff;

            -moz-border-radius-bottomleft:0px;
            -webkit-border-bottom-left-radius:0px;
            border-bottom-left-radius:0px;

            -moz-border-radius-bottomright:0px;
            -webkit-border-bottom-right-radius:0px;
            border-bottom-right-radius:0px;

            -moz-border-radius-topright:0px;
            -webkit-border-top-right-radius:0px;
            border-top-right-radius:0px;

            -moz-border-radius-topleft:0px;
            -webkit-border-top-left-radius:0px;
            border-top-left-radius:0px;
        }.CSSTable table{
            border-collapse: collapse;
                border-spacing: 0;
            width:100%;
            height:25%;
            margin:0px;padding:0px;
        }.CSSTable tr:last-child td:last-child {
            -moz-border-radius-bottomright:0px;
            -webkit-border-bottom-right-radius:0px;
            border-bottom-right-radius:0px;
        }
        .CSSTable table tr:first-child td:first-child {
            -moz-border-radius-topleft:0px;
            -webkit-border-top-left-radius:0px;
            border-top-left-radius:0px;
        }
        .CSSTable table tr:first-child td:last-child {
            -moz-border-radius-topright:0px;
            -webkit-border-top-right-radius:0px;
            border-top-right-radius:0px;
        }.CSSTable tr:last-child td:first-child{
            -moz-border-radius-bottomleft:0px;
            -webkit-border-bottom-left-radius:0px;
            border-bottom-left-radius:0px;
        }.CSSTable tr:hover td{
            background-color:<<thisform.ycolor1>>;

        }
        .CSSTable td{
            vertical-align:middle;
            background-color:<<thisform.ycolor2>>;
            border:1px solid #ffffff;
            border-width:0px 1px 1px 0px;
            text-align:left;
            padding:5px;
            font-size:<<thisform.yfontsize>>px;
            font-family:Arial;
            font-weight:normal;
            color:<<thisform.ycolor3>>;
        }.CSSTable tr:last-child td{
            border-width:0px 1px 0px 0px;
        }.CSSTable tr td:last-child{
            border-width:0px 0px 1px 0px;
        }.CSSTable tr:last-child td:last-child{
            border-width:0px 0px 0px 0px;
        }
        .CSSTable tr:first-child td{
                background:-o-linear-gradient(bottom, #0057af 5%, #0057af 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0057af), color-stop(1, #0057af) );
            background:-moz-linear-gradient( center top, #0057af 5%, #0057af 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0057af", endColorstr="#0057af");    background: -o-linear-gradient(top,#0057af,0057af);

            background-color:<<thisform.ycolor4>>;
            border:0px solid #ffffff;
            text-align:center;
            border-width:0px 0px 1px 1px;
            font-size:14px;
            font-family:Arial;
            font-weight:bold;
            color:<<thisform.ycolor5>>;
        }
        .CSSTable tr:first-child:hover td{
            background:-o-linear-gradient(bottom, #0057af 5%, #0057af 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0057af), color-stop(1, #0057af) );
            background:-moz-linear-gradient( center top, #0057af 5%, #0057af 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0057af", endColorstr="#0057af");    background: -o-linear-gradient(top,#0057af,0057af);

            background-color:#0057af;
        }
        .CSSTable tr:first-child td:first-child{
            border-width:0px 0px 1px 0px;
        }
        .CSSTable tr:first-child td:last-child{
            border-width:0px 0px 1px 1px;
        }
        </style>
        <<m.xx>>
        ENDTEXT
        Local m.lcdest
        m.lcdest=Addbs(Sys(2023))+"ycss_table1.html"
        Strtofile(m.myvar, m.lcdest)
        Thisform.olecontrol1.Navigate(m.lcdest)

    Endproc

    Procedure Init
        Sele ycurs
        Thisform.Caption=Thisform.Caption+" : "+_Screen.ytable+" [Records="+Trans(Reccount())+']'
        Local m.xstyle
        m.xstyle=Inputbox("Choce a style :1-2-3-4-5","","1")
        m.xstyle=Val(m.xstyle)
        If !Inlist(m.xstyle,1,2,3,4,5)
            m.xstyle=1
        Endi

        With Thisform
            .AddProperty("ycolor1","#d3e9ff")  &&hover TD color
            .AddProperty("ycolor2","#aad4ff")  &&TD background color
            .AddProperty("ycolor3","#000000")  &&TD forecolor
            .AddProperty("ycolor4","#0057af")  &&tr:first-child td color
            .AddProperty("ycolor5","#ffffff")  &&t:first forecolor.....can add other here tocutomize css
            .AddProperty("yfontsize","10")
        Endwith

        Thisform.ybuild(m.xstyle)
    Endproc


    Procedure Load
        Close Data All
        _Screen.AddProperty("ytable","Customer.dbf")  &&for form caption only
        Sele * From Home(1)+"samples\data\customer" Into Cursor ycurs
    Endproc

    Procedure Destroy
        Try
            Dele File Addbs(Sys(2023))+"ycss_table1.html"
        Catch
        Endtry

        Close Data All
        Set Safe On
        Clea Events
    Endproc

    Procedure olecontrol1.Init
        This.silent=.T.
    Endproc


Enddefine
*

*End code

*can use td.padding as parameter to interact with the row height or use td.font-size  to do same thing.

remark: you can add preview+print button without problem.

-issue CTRL+P on form if permitted(fire the dialog box print)

-or use ie eventhandler to intercept any key (http://yousfi.over-blog.com/2015/02/vfp-and-internet-explorer-eventhandler.html)

-or even use this code (in a button for ex.) to fire the preview (uncomment for print)

#DEFINE OLECMDID_PRINT 6                           &&   print
#DEFINE OLECMDID_PRINTPREVIEW 7             &&  print/preview
#DEFINE OLECMDEXECOPT_DODEFAULT 0
#DEFINE OLECMDEXECOPT_PROMPTUSER 1

try
local apIE
apIe=thisform.olecontrol1
with apIE
.ExecWB( OLECMDID_PRINTPREVIEW , 0) &&print preview
*.ExecWb( OLECMDID_PRINT,0)  &&print
endwith

catch
endtry

-Issue CTRL+F to find any string

Beautify your tables views with CSS
Beautify your tables views with CSS
Beautify your tables views with CSS
Beautify your tables views with CSS
Beautify your tables views with CSS
Beautify your tables views with CSS

Click on code to select [then copy] -click outside to deselect

*2* use of genhtml.prg or _genhmtl public variable (shipped with vfp9).
local lcfile_source,lc_file_output
lcfile_source=home(1)+"samples\data\customer.dbf"
DO (_GENHTML) WITH  "" ,m.lcfile_source  ,2 &&can be 0,1,2,3,4,5 see foxhelp in Genhtml.prg
*this fires a dialogbox---choose an output html file...it saved and viewed the source table in navigator
*its an old style but using CSS can be as tables obove.
*syntax DO (_GENHTML) WITH   [, ][,][,...
*see in help genhtml.prg
*its equivalent of save as html in vfp/file/menu.


To be informed of the latest articles, subscribe:
Comment on this post