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:

- Google Gemini updates: Flash 1.5, Gemma 2 and Project Astra
- Displaying External Posts on Your al-folio Blog
- a post with tabs
- a post with typograms
- a post that can be cited