Draw boxes with table

[covert rampart]

Need help with table 🙂

?r theme=light

#set par(leading: 0.25em)

#let color_map = (
  rgb(175, 175, 255),
  rgb(175, 255, 175),
  rgb(255, 255, 175),
  rgb(255, 175, 175),
  rgb(210, 210, 255),
  rgb(210, 255, 210),
  rgb(255, 210, 210),
  aqua,
  teal,
  red.transparentize(50%),
  yellow,
  lime,
  fuchsia.transparentize(50%),
  olive,
  orange,
  purple,  
  maroon.transparentize(70%),
  rgb(87, 127, 230).transparentize(30%),
  cmyk(27%, 0%, 3%, 5%),
  color.hsl(30deg, 50%, 60%),
  color.mix((red, 70%), (blue, 30%)),
  color.mix((red, 70%), (fuchsia, 30%)).transparentize(30%),
  color.mix((aqua, 70%), (fuchsia, 30%)),
  color.mix((purple, 70%), (blue, 30%)).transparentize(50%),
  color.mix((red, 30%), (fuchsia, 70%)).transparentize(50%),
  color.mix((eastern, 30%), (fuchsia, 70%)),
  color.mix((green, 50%), (olive, 50%)),
  color.mix((blue, 50%), (purple, 50%)),
)


#let cell(thr_idx, val_idx) = table.cell(fill: color_map.at((thr_idx.bit-and(31))))[#block(width: 1.5em, height: 1.5em)[T#(thr_idx) \ V#(val_idx)]]

#let table_A = table(
  columns: 8,
  rows: 5,
  align: center,
  ..range(8).map(str),
  cell(0, 0), cell(0, 1), cell(0, 2), cell(0, 3), cell(16, 0), cell(16, 1), cell(16, 2), cell(16, 3), 
  cell(1, 0), cell(1, 1), cell(1, 2), cell(1, 3), cell(17, 0), cell(17, 1), cell(17, 2), cell(17, 3), 
  cell(2, 0), cell(2, 1), cell(2, 2), cell(2, 3), cell(18, 0), cell(18, 1), cell(18, 2), cell(18, 3), 
  cell(3, 0), cell(3, 1), cell(3, 2), cell(3, 3), cell(19, 0), cell(19, 1), cell(19, 2), cell(19, 3), )

#table_A

[covert rampart]

How can I remove the lines in the header?

[lavish birch]

you can add stroke: none to cells at y == 0

[covert rampart]

Ok It worked.

How can i make each cell exact a square?

[lavish birch]

well, ideally you'd do that by making the contents inside each cell an exact square

cuz if you force the cell to have the shape of a square but not its contents, things will look off

so you can place the stuff in it inside a block(width: 1.5em, height: 1.5em) for example

[covert rampart]

It doen't look right,, the contents are breaking out the cells?

[lavish birch]

indeed, there are a few factors here:

1. inset (internal cell padding): default inset is 5pt, you can try changing that value for the non-header cells with inset: (x, y) => if y == 0 { 5pt } else { 0pt } for example

2. paragraph leading (space between lines)

you will have to reduce the leading, or perhaps play with inset a bit

or just increase the size of the square

cuz your stuff doesnt fit at first

[covert rampart]

Fixed with changing the paragraph leading.

You have been so helpful, thank you!