Attribute Lists

Optional feature

Attribute lists require attr_list: true in your configuration.

markdown_extensions:
  - pymdown_multimd_table:
      attr_list: true

Attribute lists let you attach HTML attributes directly to table elements. For styling, the most useful token is usually .class, but #id and key="value" work too.

Token	Common use
`.class`	Add a reusable CSS hook
`#id`	Target one specific element
`key="value"`	Add any other HTML attribute such as `data-*`

Where the attributes go

Placement	Target element	Example
Inside a cell, before the closing `\|`	`<td>` or `<th>`	`Sale {.featured}`
After the last `\|` in a row	`<tr>`	`\| 19 \|{.featured-row}`
Standalone `{...}` line after a body section	`<tbody>`	`{.bg-color-green}`
Final standalone `{...}` line in the table block	`<table>`	`{.bg-color-primary}`

Style a single cell

Put the attribute block inside the cell. The class lands on the rendered <td>.

| Item | Price |
| :--- | ----: |
| Notebook {.featured} | $12 |
| Pencil | $2 {#sale-price} |

ResultHTML

Item	Price
Notebook	$12
Pencil	$2

<table>
<thead>
<tr>
<th style="text-align:left">Item</th>
<th style="text-align:right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="featured" style="text-align:left">Notebook</td>
<td style="text-align:right">$12</td>
</tr>
<tr>
<td style="text-align:left">Pencil</td>
<td id="sale-price" style="text-align:right">$2</td>
</tr>
</tbody>
</table>

Style header cells

The same syntax works in the header row, so the attributes land on <th>.

| Plan {.featured} | Seats |
| :------------------- | ----: |
| Starter | 3 |
| Pro | 10 |

ResultHTML

Plan	Seats
Starter	3
Pro	10

<table>
<thead>
<tr>
<th class="featured" style="text-align:left">Plan</th>
<th style="text-align:right">Seats</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Starter</td>
<td style="text-align:right">3</td>
</tr>
<tr>
<td style="text-align:left">Pro</td>
<td style="text-align:right">10</td>
</tr>
</tbody>
</table>

Style a full row

Put the attribute block after the last pipe. The class is applied to the <tr>, so every cell in that row picks up the styling.

| Plan | Price |
| :--- | ----: |
| Starter | $9 |
| Pro | $29 |{.featured-row}

ResultHTML

Plan	Price
Starter	$9
Pro	$29

<table>
<thead>
<tr>
<th style="text-align:left">Plan</th>
<th style="text-align:right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Starter</td>
<td style="text-align:right">$9</td>
</tr>
<tr class="featured-row">
<td style="text-align:left">Pro</td>
<td style="text-align:right">$29</td>
</tr>
</tbody>
</table>

Style a header row

Row attributes also work on header rows.

| Name | Role |{.featured-row}
| :---------------- | :--- |
| Ana | Maintainer |

ResultHTML

Name	Role
Ana	Maintainer

<table>
<thead>
<tr class="featured-row">
<th style="text-align:left">Name</th>
<th style="text-align:left">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Ana</td>
<td style="text-align:left">Maintainer</td>
</tr>
</tbody>
</table>

Style a tbody section

With multibody: true, a standalone {...} line after a body section applies to that <tbody>. Because the final standalone attribute line is always table-level, the last body in this example gets its own class and the table gets one too.

| Category | Item |
| :------- | :--- |
| Fruit | Apple |
| Fruit | Banana |
{.bg-color-green}

| Vegetable | Carrot |
| Vegetable | Onion |
{.bg-color-orange}
{.bg-color-primary}

ResultHTML

Category	Item
Fruit	Apple
Fruit	Banana
Vegetable	Carrot
Vegetable	Onion

<table class="bg-color-primary">
<thead>
<tr>
<th style="text-align:left">Category</th>
<th style="text-align:left">Item</th>
</tr>
</thead>
<tbody class="bg-color-green">
<tr>
<td style="text-align:left">Fruit</td>
<td style="text-align:left">Apple</td>
</tr>
<tr>
<td style="text-align:left">Fruit</td>
<td style="text-align:left">Banana</td>
</tr>
</tbody>
<tbody class="bg-color-orange">
<tr>
<td style="text-align:left">Vegetable</td>
<td style="text-align:left">Carrot</td>
</tr>
<tr>
<td style="text-align:left">Vegetable</td>
<td style="text-align:left">Onion</td>
</tr>
</tbody>
</table>

Requires multibody

Tbody attributes are only meaningful when multibody: true is enabled.

Style the whole table

The last standalone {...} line in the table block always targets the <table> element itself.

| Item | Stock |
| :--- | ----: |
| Notebook | 18 |
| Pencil | 41 |
{.bg-color-primary}

ResultHTML

Item	Stock
Notebook	18
Pencil	41

<table class="bg-color-primary">
<thead>
<tr>
<th style="text-align:left">Item</th>
<th style="text-align:right">Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Notebook</td>
<td style="text-align:right">18</td>
</tr>
<tr>
<td style="text-align:left">Pencil</td>
<td style="text-align:right">41</td>
</tr>
</tbody>
</table>

If you need attributes on both the last <tbody> and the <table>, use two consecutive lines at the end:

| Item |
| :--- |
| Notebook |
{.bg-color-green}
{.bg-color-primary}

Combine classes with other table features

Attribute lists are preserved when other table features are active.

Wrappable columns

Your class is appended to the built-in extend class.

| Name | Notes {.wrap} |
| :--- | :----------------------+ |
| Pencil | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua {.wrap} |

ResultHTML

Name	Notes
Pencil	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th class="extend wrap" style="text-align:left">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Pencil</td>
<td class="extend wrap" style="text-align:left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td>
</tr>
</tbody>
</table>

Alignment, colspan, and rowspan

Alignment styles stay on the same element as your class.
Colspan and rowspan preserve your attributes on the merged cell.
Cell and row attributes can be used together on the same row.

Disabled by default

When attr_list: false is left at its default value, {...} is not consumed as table metadata:

Inside a cell, it stays as literal text.
After the last |, it becomes another cell.
On a standalone line, it is not treated as a table attribute.

Tip

The attr_list option is compatible with the standard attr_list Markdown extension, so you can enable both:

markdown_extensions:
  - pymdown_multimd_table:
      attr_list: true
  - attr_list