Content Editor - Table Wizard

The Table Wizard gives you the tools you need to set up and configure a table from scratch or to edit an existing table in your webpage. This feature can be accessed using the following buttons:

  • The Table Wizard button found inside the Insert Table window.
  • Cell Properties button found at the lower portion of the Content Editor when selecting a table cell.
  • Cell Properties button found at the lower portion of the Content Editor when selecting a table cell.

Inside the Table Wizard, you’ll find four tabs that will enable you to set up and customize your table:

  • Table Design
  • Table Properties
  • Cell Properties
  • Accessibility

Table Design

The Table Design tab gives you the capability to create a new table for your web page. The tab is divided into three sections:

  • Columns - This section lets you add or delete a column in your table. To add a column, just click the plus (+) sign. To delete a column, click the minus (-) sign. This section also lets you configure a cell to span across two or more columns. Just select a cell and click the plus (+) button beside the Column Span title. To remove a Column Span, just click on the minus (-) sign.
  • Rows - This section gives you the ability to add or delete a row from your table. To add a row, click the plus (+) sign. To delete a row, click the minus (-) sign. The Rows section also lets you configure a cell to span across two or more rows. Simply select a cell and click the plus (+) button beside the Row Span title. To remove a Row Span, just click the minus (-) sign.

All changes made to the table in terms of adding or removing a cell will be seen on the left side of the Table Wizard window.

Table Properties

The Table Properties tab allows you to customize your table to suit your need. The tab is divided into three sections:

  • Dimensions - Allows you to set the height and width of your table.
  • Layout - Lets you configure the design of your table. You can add spacing between each cell, align the entire table, give it a background color, or add a background image. It even lets you apply a CSS Class that’s part of your Site CSS Style Sheet.
  • CSS Class Layout - Gives you the option to format the appearance of your table by choosing from the following pre-formatted layouts.
    • No CSS Layout
    • telerik-re Table-1
    • telerik-re Table-2
    • telerik-re Table-3
    • telerik-re Table-4

A preview of these pre-formatted layouts can be seen in the Preview section underneath the checkboxes.

Cell Properties

The Cell Properties tab allows you to configure the properties of each cell. It’s divided into two sections: the Preview screen and Cell Properties screen.

  • Preview Screen - The screen shows you the available cells that you can configure. All changes made are shown on this screen. You can select one cell or all of the cells available in your table for editing.
  • Cell Properties - Similar to the Layout section found in the Table Properties tab, this section gives you the tools to configure the cell you’ve selected. You can add spacing and padding to the cell, align the cell’s content, assign a background color, or add a background image. It also lets you apply a CSS Class that’s part of your existing Site CSS Style Sheet.

Accessibility

The Accessibility Tab gives you the option to add a header caption and embed a summary code to your table.

The caption you add will automatically be displayed on the top section of your table. You have the option to align it depending on your preference.

The Summary text on the other hand will automatically be placed on the HTML code of your table. While it won’t be visible live, it will provide those who view your HTML code a summary of what your table is supposed to display.

Once you’re done setting up your table, click the OK button at the lower right section of the Table Wizard window to save your work.

 

        Top