Article

Adding an HTML Table

Add a table formatted in HTML to your article.

Overview

To add an HTML table to your article, you add a component with the role property set to htmltable. In the required html property, add the coded HTML table consisting of your data and the HTML tags that indicate rows. Make sure that all of your HTML code is enclosed in <table> </table> tags.

To change the appearance of an HTML table, you can use any of the HTML tags supported by Apple News Format; for more information, see Using HTML with Apple News Format. You can also apply componentStyles from Apple News Format; for more information, see TableStyle.

Review the HTML Table Tags

These tags are supported for HTML tables:

<table> </table>

<th> </th>

<tr> </tr>

<td> </td>

<thead> </thead>

<tbody> </tbody>

<tfoot> </tfoot>

<caption> </caption>

This list describes how to use the basic HTML table tags:

  • Begin each row of the table (including the header row) with <tr> and end each row with </tr>.

  • Use table heading tags (<th> and </th>) around each element in the table header.

  • Put table data tags (<td> and </td>) around each element in a row.

  • Enclose a single row or group of rows in <thead>, <tbody>, or <tfoot> tags.

  • Style your table text using supported HTML tags. See Using HTML with Apple News Format.

  • Use a JSON ComponentStyle that has the tableStyle object defined to specify table alignment, table padding, and other, nontextual table styles. Apple News Format ignores any style-related HTML attributes, such as cellpadding, cellspacing, width, and alignment.

Consider the following example HTML code:

<table><tr><th>First Name</th><th>Last Name</th></tr>
<tr><td>John</td><td>Appleseed</td></tr></table>

This code results in a table with two columns and two rows—one row is for the heading and one is for data.

First name

Last name

John

Appleseed

See Also

Tables with HTML Data

object HTMLTable

The component for adding tables with HTML data.