<commit_before>---
title: Markup Table
related:
  - /vue-components/table
---

The QMarkupTable is a way for you to simply wrap a native `<table>` in order to make it look like a Material Design table.

::: tip
For advanced functionality like pagination, sorting, filtering, and many more, you may want to check out [QTable](/vue-components/table) component instead.
:::

## Installation
<doc-installation components="QMarkupTable" />

## Usage
::: warning
Notice that the content of `QMarkupTable` reflects an accurate markup representation of a native HTML `<table>`, having a `<thead>` and `<tbody>` to wrap header and table body. This is required.
:::

<doc-example title="Basic" file="QMarkupTable/Basic" no-edit />

<doc-example title="Separators" file="QMarkupTable/Separators" no-edit />

<doc-example title="Dark" file="QMarkupTable/Dark" no-edit />

<doc-example title="Customization" file="QMarkupTable/Customization" no-edit />

## QMarkupTable API
<doc-api file="QMarkupTable" />
<commit_msg>Adds warning about UMD version not working<commit_after>---
title: Markup Table
related:
  - /vue-components/table
---

The QMarkupTable is a way for you to simply wrap a native `<table>` in order to make it look like a Material Design table.

::: tip
For advanced functionality like pagination, sorting, filtering, and many more, you may want to check out [QTable](/vue-components/table) component instead.
:::

## Installation
<doc-installation components="QMarkupTable" />

## Usage
::: tip
Notice that the content of `QMarkupTable` reflects an accurate markup representation of a native HTML `<table>`, having a `<thead>` and `<tbody>` to wrap header and table body. This is required.
:::
::: warning IMPORTANT NOTE!
This component will *NOT* work within the UMD version of Quasar. This is due to the autocorrection facility built into browsers for table HTML. 
:::

<doc-example title="Basic" file="QMarkupTable/Basic" no-edit />

<doc-example title="Separators" file="QMarkupTable/Separators" no-edit />

<doc-example title="Dark" file="QMarkupTable/Dark" no-edit />

<doc-example title="Customization" file="QMarkupTable/Customization" no-edit />

## QMarkupTable API
<doc-api file="QMarkupTable" />

{'fraction_non_alphanumeric': 0.12160940325497288, 'fraction_numerical': 0.0, 'mean_word_length': 4.9013333333333335, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5927301', 'n_tokens_mistral': 684, 'n_tokens_neox': 659, 'n_words': 243}