displaying beautiful tables with Bootstrap Tables

Using markdown to display tables is easy. Just use 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 |

That 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

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

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



Enjoy Reading This Article?

Here are some more articles you might like to read next:

  • a distill-style blog post
  • a post with code diff
  • a post with code
  • a post with table of contents on a sidebar
  • a post with jupyter notebook