Tutorial

Creating simple table from simple data
Adding table headers and attributes
Lets make it clickable
Lets add style

Creating simple table from simple data

    
       var data = [[1, "red", "10C"], [2, "green", "50F"], [3, "blue", "273K"]];

        cs_set("example1div",
            cs_table(
                data.collect( function( v, i ){
                    return cs_tr(
                        v.collect( function(e,i) {
                            return cs_td( cs_text( e ) );
                        })
                    )
                })
            )
        );

Adding table headers and attributes

    
       cs_set("example2div",
            cs_table([
                cs_thead(
                    cs_tr([
                        cs_td("#", {bgcolor: "#FF9999"}),
                        cs_td("color", {bgcolor: "#99FF99"}),
                        cs_td("temperature", {bgcolor: "#9999FF"}),
                    ])
                ),
                cs_tbody(
                    data.collect( function( v, i ){
                        return cs_tr(
                            v.collect( function( e, i ) {
                                return cs_td( cs_text( e ) );
                            })
                        )
                    })
                )], {border: 1})
        );

Lets make it clickable

Just click on the cells

    
       cs_set("example3div",
            cs_table([
                cs_thead(
                    cs_tr([
                        cs_td("#", {bgcolor: "#FF9999"}),
                        cs_td("color", {bgcolor: "#99FF99"}),
                        cs_td("temperature", {bgcolor: "#9999FF"}),
                    ])
                ),
                cs_tbody(
                    data.collect( function( v, i ){
                        return cs_tr(
                            v.collect( function( e, i ) {
                                return cs_td( cs_text( e ),{
                                    events: {
                                        onclick: function(){alert(e)}
                                    }
                                });
                            })
                        )
                    })
                )], {border: 1})
        );

Lets add style

    
       cs_set("example4div",
            cs_table([
                cs_thead(
                    cs_tr([
                        cs_td("#", {bgcolor: "#FF9999"}),
                        cs_td("color", {bgcolor: "#99FF99"}),
                        cs_td("temperature", {bgcolor: "#9999FF"}),
                    ])
                ),
                cs_tbody(
                    data.collect( function( v, i ){
                        return cs_tr(
                            v.collect( function( e, i ) {
                                return cs_td( cs_text( e ),{
                                    events: {
                                        onclick: function(){alert(e)}
                                    },
                                    style: {
                                        backgroundColor: v[1]
                                    }
                                });
                            })
                        )
                    })
                )], {border: 1})
        );

Almost lisp. That's all folks! Any other things are up to you. If you want to say, to contribute, to fix or just to joke - welcome to HTMLCS@SourceForge!