```ts
import Table from '~/components/ui/Table.vue'
```
# Table
Arrange cells in a grid.
For every row, add exactly one element per column.
Design [Penpot]
**Prop** `grid-template-columns`: An array of the column widths. You can make a column either fixed-width or use part of the available space:
- `100px`: Exactly this width
- `auto`: The the widest cell in the column
- `1fr`: A certain fraction of the remaining space
The whole table always has a width of 100% (or `stretch`, if inside a flex or grid context). If the minimum sizes don't fit, all cells will shrink proportionally.
```vue-html
100pxauto2fr1fr
```
100pxauto2fr1fr
## Add a table header
Use the `#header` slot to add items to the header. Make sure to add one item per column.
```vue-html
```
## Let cells span multiple rows or columns
- Cells automatically expand into the **next column** if the following item is empty. Make sure the first element in each row is not empty!
- You can let elements span **multiple rows** by adding `style=grid-row: span 3`. In this case, you have to remove the corresponding cells directly below.
```vue-html
C1
Title 1
Artist 1
D1
⌄
B2
C2
Title 2
Album 2
Artist 2
F2
D2
⌄
B3
C3
Title 3
Artist 3
F3
D3
⌄
B4
C4
Title 4
F4
D4
⌄
```
C1
Title 1
Artist 1
D1
⌄
B2
C2
Title 2
Album 2
Artist 2
F2
D2
⌄
B3
C3
Title 3
Artist 3
F3
D3
⌄
B4
C4
Title 4
F4
D4
⌄
## Add props to the table header
To add class names and other properties to the table header, set the `header-props` prop. In the following example, the whole header section is made inert.
Note that `style` properties may not have an effect because the header section is `display: contents`. Instead, add a custom attribute and add scoped style rule targeting your attribute.
```vue-html