displaying beautiful tables with Bootstrap Tables

Using markdown to display tables is easy.

Simple Example

First, add the following to the post’s front matter

pretty_table: true

Then, the following syntax

| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
| Left 1       |    center 1    |       right 1 |
| Left 2       |    center 2    |       right 2 |
| Left 3       |    center 3    |       right 3 |

will generate

Left aligned	Center aligned	Right aligned
Left 1	center 1	right 1
Left 2	center 2	right 2
Left 3	center 3	right 3

HTML Example

It is also possible to use HTML to display tables. For example, the following HTML code will display a table with Bootstrap Table, loaded from a JSON file:

<table
  id="table"
  data-toggle="table"
  data-url="{{ '/assets/json/table_data.json' | relative_url }}"
>
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

ID	Item Name	Item Price

More Complex Example

By using Bootstrap Table it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the documentation.

<table
  data-click-to-select="true"
  data-height="460"
  data-pagination="true"
  data-search="true"
  data-toggle="table"
  data-url="{{ '/assets/json/table_data.json' | relative_url }}"
>
  <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th
        data-field="id"
        data-halign="left"
        data-align="center"
        data-sortable="true"
      >
        ID
      </th>
      <th
        data-field="name"
        data-halign="center"
        data-align="right"
        data-sortable="true"
      >
        Item Name
      </th>
      <th
        data-field="price"
        data-halign="right"
        data-align="left"
        data-sortable="true"
      >
        Item Price
      </th>
    </tr>
  </thead>
</table>

	ID	Item Name	Item Price

Simple Example

HTML Example

More Complex Example

Enjoy Reading This Article?