Style Individual Column Headers

Business Background

Styling individual column headers give a business the upper hand by adding the extra option to point out a column quickly.

Titan Solution

  • Titan Web offers the option to style individual column headers.
  • Admins can use styling options such as font, fill, padding, border, and more to style all column headers or a particular column header of your choice. 

How to Video

Video Coming Soon!

How to Guide

  1. Select the expand (+) icon next to the settings icon in Titan Web. A list of elements will show.
  2. Select the Table element option from the list.
  3. Select and drag the Power Table element to the canvas.
  4. Select the Styling icon of the power table. The Power Table Styling screen opens.
  5. Select the Header Column.
  6. Use the drop-down arrow to open the drop-down list.
  7. Select the header. The options are:
    • All Columns
    • Selection
    • The name of the columns you added.
Power Table Styling screen
Power Table Styling screen

You can change the following:

  • Font
  • Fill
  • Padding
  • Border
  • Shadow
  • User CSS
  1. For instance, select the name of one of the columns. In this example, Account ID.
  2. Select the Fill option. This option is used to change the fill color.
  3. Select a color. The heading column will change to the color selected.
Header column changed
Header column changed

You can change the columns independently from the header column.

  1. Select the Column option.
  2. Select the same column name as in the previous section, for instance, Account ID.
Column option
Column option

You can change the following:

  • Font
  • Fill
  • Size
  • Padding
  • Border
  • Shadow
  • User CSS
  1. Select the Fill option. This option is used to change the fill color.
  2. Select a color. The column under the selected header will change to the chosen color.
Column changed
Column changed
Note:

If you didn’t change the header column color and then change the styling for the column, the entire column would change.

This image has an empty alt attribute; its file name is image-816.png

Hidden Title

Need more help?