Edit this page

Table Wizard Dialog

As of the Kendo UI R3 2016 release and in addition to the Insert Table tool, the user is now able to add and configure tables by using the Table Wizard dialog.

Getting Started

Insert Tables

To insert a new table by using the Table Wizard dialog:

  1. Open the Insert Table tool.
  2. To open the dialog, click the Table Wizard button.
  3. Configure the table that is to be inserted.
  4. Click the OK button.

Modify Tables

To modify an existing table or a table cell:

  1. Select the table or the table cell to edit.
  2. Click the Table Wizard tool in the toolbar.

Important

Even without using the table wizard dialog, you can resize the table rows and columns by dragging the cell border with the mouse.

Table Wizard Options

The table and cell options that are available in the Table Wizard are displayed in the following three tabs:

  • Table—The available options for the table element.
  • Cell—The available options for the selected cell or all cells in the table.
  • Accessibility—The available options related to accessibility.

Table

The Table tab provides the following options:

  • Width—Changes the width of the table (in pixels, em, or percent).
  • Height—Changes the height of the table (in pixels, em, or percent).
  • Columns—Defines the columns of the table.
  • Rows—Defines the rows of the table.
  • Cell Spacing—Specifies the space between the cells (cellspacing attribute).
  • Cell Padding—Specifies the padding in the cells (cellpadding attribute).
  • Alignment—Specifies the text alignment in the cells.
  • Background—Specifies the background color of the table.
  • CSS Class—Defines the class names for the table element (white space-separated).
  • ID—Defines the id of the table element.
  • Border—Defines the border size (in pixels only) and color.
  • Border Style—Defines the border style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, and inherit).
  • Collapse borders—Adds an inline style to that table element with the border-collapse: collapse rule (border-collapse property).

Cell

The Cell tab provides the following options:

  • Select All Cells—Applies the changes to all cells in the table.
  • Width—Changes the width of the cell or cells (in pixels, em, or percent).
  • Height—Changes the height of the cell or cells (in pixels, em, or percent).
  • Cell Margin—Defines the margin of the cell or cells.
  • Cell Padding—Defines the padding of the cell or cells.
  • Alignment—Specifies the text alignment of the cell or cells.
  • Background—Specifies the background color of the cell or cells.
  • CSS Class—Defines class names for the cells (white space-separated).
  • ID—Defines the id of the cells.
  • Border—Defines the border size (in pixels only) and color of the cells.
  • Border Style—Defines the border style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, and inherit).
  • Wrap text—When unchecked, applies a white-space: nowrap style to the cells (white-space property).

Accessibility

The Accessibility tab provides the following options:

See Also

Other articles on the Kendo UI Editor:

For how-to examples on the Kendo UI Editor widget, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy