# displaying beautiful tables with Bootstrap Tables

March 20, 2023

[** 2023](https://alextisyoung.com/blog/2023) · [** formatting](https://alextisyoung.com/blog/tag/formatting) [** tables](https://alextisyoung.com/blog/tag/tables) · [** sample-posts](https://alextisyoung.com/blog/category/sample-posts)

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](https://bootstrap-table.com/), 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](https://bootstrap-table.com/) 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](https://examples.bootstrap-table.com/index.html).

```
<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](https://alextisyoung.com/blog/2021/distill/)

- [a post with code](https://alextisyoung.com/blog/2015/code/)

- [a post with table of contents on a sidebar](https://alextisyoung.com/blog/2023/sidebar-table-of-contents/)

- [a post with jupyter notebook](https://alextisyoung.com/blog/2023/jupyter-notebook/)

- [a post with math](https://alextisyoung.com/blog/2015/math/)

Source: [displaying beautiful tables with Bootstrap Tables | Alexander Strudwick Young](https://alextisyoung.com/blog/2023/tables/)