Codex Tag: tabular

This brief tutorial will highlight the key aspects to consider when using the Tabular layout.

 

Goal

Goal

Our goal is the simple table of posts seen on the Architect Demos site

Blueprint Design

Blueprint Design

  1. After creating a new Blueprint and entering information for the Title and Short Name, in Blueprint Design select the Tabular layout type
  2. You can optionally add Table column titles. If you don't, it will use the components' names
  3. Set the Panels across all to 1
Content Layout

Content Layout

  1. In Content Layout, select the Components to show
  2. Resize them to fit all across. The width you set for each will be the approximate width of the column.
  3. Make sure the Components width is 100%
Blueprint Styling

Blueprint Styling

  1. In the Blueprint Styling, go to the Tabular tab

From here you can style the Headings, Odd rows, and Even rows. In our example we've created alternating coloured rows by giving the odd row a background colour.

Display the Blueprint

Display the Blueprint

Using your preferred method, place the Blueprint on a page an check to see it displays as intended.