Dojo Tabbed Tables in XPages

Create an Xpage and copy paste the following code into the source tab of the same. Preview the XPage and you will tabbed tables created using dojo as displayed in the following figure.
 
 

Step 1. Enclose the following style imports to a style tag on the XPage
        @import "../resources/dojo.css"; @import
        "../dijit/themes/tundra/tundra.css";
    
Step 2: Add the inclusion of the dojo.xd.js to the XPage as mentioned below
    <script type="text/javascript" src="dojo.xd.js"  djConfig="parseOnLoad: true">
    </script>

Step 3: Associate the following script with the XPage
        dojo.require("dojo.parser");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.form.Button"); dojo.require("dojo.widget");
 
Step 4:  Put the following div tags on the page and preview the same. You will be able to see a nice good tabbed table on your screen
    <h1>Tab Container</h1>
    <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
        style="width:500px;height:100px">
        <div id="tab1" dojoType="dijit.layout.ContentPane"
            title="First Tab" selected="true" closable="true">
            First Tab
        </div>
        <div id="tab2" dojoType="dijit.layout.ContentPane"
            title="Second Tab" closable="true">
            Second Tab
        </div>
        <div id="tab3" dojoType="dijit.layout.ContentPane"
            title="Third Tab" closable="true">
            Third Tab
        </div>
    </div>

Note :  We can work with the tabbeb table through dojo code as well. Following is a simple way of selecting a particular tab
    var tabbedPanel = dojo.byId("mainTabContainer");
    tabbedPanel.selectTab("tab2");

Hope this helps :)