2023-03-21-tables.md

layout	title	date	description	tags	categories	giscus_comments	related_posts	pretty_table
post	displaying beautiful tables with Bootstrap Tables	2023-03-20 14:37:00 -0400	an example of how to use Bootstrap Tables	formatting tables	sample-posts	true	true	true

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:

{% raw %}

<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>

{% endraw %}

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.

{% raw %}

<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>

{% endraw %}

	ID	Item Name	Item Price