InstantASP Support

Help & Support

Working with tables within InstantKB articles


This article offers best practices & tips for working with HTML tables within InstantKB articles. HTML tables are a great way to represent tabular data and InstantKB offers a comprehensive set of tools to help you easily work with tables.

Adding Tables

To add a new table into any InstantKB article simply edit the article and place your cursor within the article where you would like to add your new table. Use the Insert Table tool within the editor to choose the number of rows and columns for your table. You can always add more rows or columns later if needed.

Formatting Tables

Once you've added your table you'll notice the table does not have a specific width or any inline or CSS style. You will simply see a ghosted outline of your table within the editor as shown below...

Before you start populating your table we would suggest applying some basic formatting to your table.

To start formatting your table and set the width for your table you'll need to right click within the empty ghosted table to access a context menu showing you all table options. To apply basic formatting to your table please follow the steps below...

1. Right clcik within the table nside the editor and choose Table Properties

2. Setting a width for your table. Within the Table Properties dialog set a width for your table. We would suggest by default simply setting a width of 100%. This will ensure your table spans the entire article and scales on different screen sizes. If you use a fixed width for your table please consider this may not render correctly on smaller screen sizes.

3. Styling your table. InstantKB offers a two ways to format or style your tables. Within the Table Properties dialog you'll notice a few key formatting options These are shown in the following screen grab with an explanation of the differences between the two further below.

A. CSS Formatting (Suggested Approach)

This is the InstantASP recommended approach for styling your tables We would suggest applying one of the six built in InstantASP CSS classes to format your table.

Within the Apply CSS drop down list select on the following classes...

  • table.kb-table-one
  • table.kb-table-two
  • table.kb-table-three
  • table.kb-table-four
  • table.kb-table-five
  • table.kb-table-six

You can a preview of how each of these CSS classes look below...

NOTE: If needed you can further customize the built in CSS classes. You'll find these CSS classes (.kb-table-one, .kb-table-two etc) within the Skins/{SkinName}/Styles/2-debug-kb.css.

B. Inline Formatting

Within the table properties dialog you'll also find options to apply inline styles into your table. We would suggest avoiding these options as this will add style attributes directly into your article to format the table. This means if ever need to change your table formatting in the future you would need to edit and update each article as opposed to simply updating a single CSS file as approach A offers.

Related Links

Optionally provide private feedback to help us improve this article...

Thank you for your feedback!

Comments require login or registration.


Product: InstantKB
Article not rated yet.
Article has been viewed 5K times.
Last Modified: 5 Years Ago
Last Modified By: Ryan Healey


Similar Articles