Creating a Multiple Column Layout

A region is an area of a page that uses a specific template to format HTML content. You use regions to group page controls. To create a multiple column layout, you create two regions that display in adjacent cells of the same table.

You can create a multiple column layout by either:

Manually creating the two adjacent regions
Defining a page template that contains a multiple column table

Creating Regions in Multiple Columns

You create new regions using the Create Region Wizard. To create a two column page, you create two regions. Oracle HTML DB replaces #BOX_BODY# within a two column table and displays the regions in two separate cells.

To create a two column page by creating regions:

Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.

The Page Definition appears.
Create the first region:
- Under Regions, click Create.
  
  The Create Region Wizard appears.
- Select a region type.
- From the Column field, select 1.
- Follow the on-screen instructions.
Create the second region:
- Under Regions, click Create.
  
  The Create Region Wizard appears.
- Select a region type.
- From the Column field, select 2.
- Follow the on-screen instructions.

Creating a Multiple Column Page Template

Page templates define the appearance of individual pages, including the placement of page controls and components. Each page template is divided into three sections: Header, Body, and Footer. The most basic template must include the substitution string #BOX_BODY# in the Body attribute. When the page is rendered, the HTML DB engine replaces #BOX_BODY# with HTML to display the regions on that page.

You can create a multiple column page by defining a page template that contains a multiple column table. You then explicitly place regions within specific table cells.

The following example demonstrates how to create a two column page and specify a region position using the #REGION_POSITION_XX# substitution string in each column. You would enter this code in the Body section of the page-level template.

<body #ONLOAD#>
  #FORM_OPEN#
  <table style="width:100%">
    <tr>
      <td style="width:50%;padding:5px;">#REGION_POSITION_01#</td>
      <td style="width:50%; border-left:2px #bbbbbb dashed; padding:5px;">#REGION_POSITION_02#</td>
    </tr>
  <br />
  #BOX_BODY#
  #FORM_CLOSE#
</body>

Once you create this page-level template, the newly defined positions would be available as Display Point options when you run the Create Region Wizard.