Table IDs and CSS classes

<< Click to Display Table of Contents >>

Navigation:  Basic Working Procedures > Working with Tables >

Table IDs and CSS classes

You can add IDs for tables that you can use in your own HTML code. In addition to this, the name of the table style is exported to HTML as the table's class attribute.

Table CSS classes

To give a table a CSS class you just need to define a table style and apply it to the table. The style name is exported as the class attribute of the <table> tag.

If you enter a table style name with one or more spaces in it, the table will have two or more style classes in HTML-based output, which is supported in CSS. The first class name is used by Help+Manual. You can use the additional classes in your own CSS in your HTML templates to define global style rules for only those tables with this class attribute.

Table IDs

The table properties dialog has an optional ID field. An ID you enter here will be exported as the <table> tag ID attribute in HTML-based output formats. You will not need this for normal tables but it is sometimes useful. For example, when you use the sortable tables option in the Help+Manual weblink Premium Pack you need to enter a special ID here to identify your table as sortable.

You may also need to use IDs in tables if you are planning to manipulate your tables with your own CSS or JavaScript code.

Creating auto-incrementing table IDs for cloned copies of tables

In HTML an ID always has to be unique, you should never have more than one object on the same page with the same ID. This can be a problem if you are cloning copies of a ready-made table, for example from snippets – if the table already contains an ID you need to edit it every time you insert a copy and if it doesn't you need to remember to add one. You can get around this by creating an automatically-incrementing ID with text variables.

You can't mix text and variables in topic IDs so you need to create two variables to do this.

1.Go to Project Explorer > Configuration > Common Properties > Text Variables and create two text variables, one for the static part of the ID and one for the incrementing number. The static part can have any name you like, the incrementing number must have two plus characters at the end of its name, for example TABLENO++.

2.Let's say the two variables are TABLEID and TABLENO++. Now enter any text you like as the text for the TABLEID variable, for example table_, and a 0 (the number zero) as the text for the TABLENO++ variable, like this:

table_ids

3. Then instead of an ID, type in both variables in the Table ID: field in your table properties, like this:

<%TABLEID%><%TABLENO++%>

Then every time you make a copy of the table in your project a new unique ID will be generated automatically. The first will be table_1, the second will be table_2 and so on.