This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# Formatting cells

# Overview

Handsontable utilizes the HTML table structure so customization is based either on referencing to the already existing elements, such as TR/TD, or by applying your own CSS classes to HTML elements.

A cell can be formatted either using a CSS class or with a style applied directly to the DOM element.

# Apply custom CSS class styles

In this example, we add a custom class custom-cell to the cell in the top left corner and add a custom-table CSS class that highlights the table headers.

    # Apply inline styles

    You can apply inline styles directly to the DOM element using its style attribute. You can use the renderer option to do that.

      # Custom cell borders

      To enable the custom borders feature, set the customBorders option. This can either be set as true or initialized as an array with a pre-defined setup.

      To initialize Handsontable with predefined custom borders, provide the cell coordinates and border styles in form of an array:

      • with row/col pairs: { row: 2, col: 2, left: { /*...*/ } }
      • or with range details: { range: { from: { row: 1, col: 1 }, to: { row: 3, col: 4 } }, left: { /*...*/ } }