---
title: TableStyle
framework: applenewsformat
role: symbol
role_heading: Object
path: applenewsformat/tablestyle
---

# TableStyle

The object for defining a style for rows, columns, cells, and headers in a table.

## Declaration

```data
object TableStyle
```

## Properties

cells: Defines the styling for individual cells in a table. columns: Defines the styling for table columns. headerCells: Defines the styling for individual cells in table headers. headerColumns: Defines the styling for the table header columns, which are present if dataOrientation is  vertical, which is the default. headerRows: Defines the styling for table header rows, which are present if dataOrientation is  horizontal, which is not the default. rows: Defines the styling for table rows.

## Mentioned in

Adding a JSON Table Adding an HTML Table Defining and Using Table Styles Enhancing Your Articles with Styles

## Discussion

Discussion You can style rows, columns, and cells including headers, and also apply conditions to customize your table. For example, you can display a different color for an even row by applying rows.conditional. You can use this object in ComponentStyle. Example {   "components": [     {       "role": "datatable",       "style": "exampleTableStyle",       "showDescriptorLabels": true,       "sortBy": [         {           "descriptor": "id-name",           "direction": "descending"         }       ],       "data": {         "descriptors": [           {             "identifier": "id-name",             "key": "name",             "label": {               "type": "formatted_text",               "text": "Name",               "textStyle": {                 "textColor": "black"               }             },             "dataType": "string"           },           {             "identifier": "id-occupation",             "key": "occupation",             "label": "Occupation",             "dataType": "string"           }         ],         "records": [           {             "name": "Amelia Earhart",             "occupation": "Pilot"           },           {             "name": "Grace Hopper",             "occupation": "Computer Scientist"           }         ]       }     }   ],   "componentStyles": {     "exampleTableStyle": {       "tableStyle": {         "rows": {           "backgroundColor": "#fff",           "divider": {             "width": 1,             "color": "#ddd"           },           "conditional": [             {               "selectors": [                 {                   "even": true                 }               ],               "backgroundColor": "#eeeeee"             }           ]         },         "headerRows": {           "backgroundColor": "#ccc",           "divider": {             "width": 2,             "color": "#999"           }         },         "cells": {           "padding": 6,           "verticalAlignment": "top"         }       }     }   } }

## See Also

### Table Styles

- [Defining and Using Table Styles](applenews/defining-and-using-table-styles.md)
- [TableRowStyle](applenewsformat/tablerowstyle.md)
- [ConditionalTableRowStyle](applenewsformat/conditionaltablerowstyle.md)
- [TableRowSelector](applenewsformat/tablerowselector.md)
- [TableColumnStyle](applenewsformat/tablecolumnstyle.md)
- [ConditionalTableColumnStyle](applenewsformat/conditionaltablecolumnstyle.md)
- [TableColumnSelector](applenewsformat/tablecolumnselector.md)
- [TableCellStyle](applenewsformat/tablecellstyle.md)
- [ConditionalTableCellStyle](applenewsformat/conditionaltablecellstyle.md)
- [TableCellSelector](applenewsformat/tablecellselector.md)
- [TableBorder](applenewsformat/tableborder.md)
- [TableStrokeStyle](applenewsformat/tablestrokestyle.md)
- [Padding](applenewsformat/padding.md)
- [FormattedText](applenewsformat/formattedtext.md)