Binding tables

HTML tables are the best way to display tabular data in rows, cells and headings. There are multiple ways of binding tabular data, depending on the use case and the type of data you have.

• You may choose to bind all rows and columns from your data source directly into an empty HTML table. This will create the appropriate row, header, and cell elements automatically.
• You may choose to bind a data structure to an existing HTML table. This will use the existing HTML structure to define the order and presence of each column.
• You may choose to prescribe exactly where data is bound within your HTML to allow for tables to contain hard-coded rows, column data, or other

There are two types of data structure that we can use to bind table data:

1. A two dimensional iterable, e.g. iterable<iterable<string>>, where the outer iterable represents the rows, and the inner iterable represents the columns, and the first index of the outer iterable contains the headings.
2. An two dimensional iterable of type iterable<string, iterable<string>>, where the string key of the iterable represents each heading, and the inner iterable represents the cell values for each row.

Binding to an empty table

Assuming the following HTML:

<h1>Weather forecast</h1>
<table data-bind:table></table>

Binding to a table with existing headings

// TODO.

// TODO.

---

Next, learn how to use objects to represent bindable data.