table blocks

a study in what happens when we destroy the table structure.

the tables in this document are not accessible beause they are assumed to be layout tables.

make some data to build our table to experiment from

n = 5
df = DataFrame(Series(list((string.ascii_letters*10)[:n**2])).values.reshape((n,n)))

utilities to create html elements from data

soup = __import__("bs4").BeautifulSoup(features="lxml")
def new(tag, *children, style=None, **attrs):
    style and attrs.update(style=" ".join(F"{k}: {v};" for k, v in style.items()))
    (element := soup.new_tag(tag, attrs=attrs)).extend(children)
    return element

reduce a dataframe to a table

def table_of_cells(df: DataFrame, caption="", **kwargs):
    table = new("table", caption, **kwargs)
    for i in range(0, len(df), 2):
        table.append(
            new("tbody", *(
                new("tr", *row) for _, row in df.iloc[i:i+2].iterrows()
            ))
        )
    return table

add randomness in size to observe table changes. words would make more sense. they don't mean anything. nothing but sound and light. waves.

cells = df.map(lambda x: new("td", x, style={"font-size": F"""{random.randint(1, 10)/5}rem"""}))

our tables turned into blocks

%%
{{table_of_cells(cells, "🍒 table", id="table")}}
{{table_of_cells(cells, "body blocks", id="tbody")}}
{{table_of_cells(cells, "block rows", id="tr")}}
{{table_of_cells(cells, "cell blocks", id="td")}}

```css
table:hover {
    outline: dashed;
    tbody:hover {
        outline: dotted;
        tr {
            border: solid;
        }
    }
}
#tbody {tbody {display:block;}}
#tr {tr {display:block;}}
#td {td {display:block;}}
```

🍒 table

a	b	c	d	e
f	g	h	i	j
k	l	m	n	o
p	q	r	s	t
u	v	w	x	y

body blocks

a	b	c	d	e
f	g	h	i	j
k	l	m	n	o
p	q	r	s	t
u	v	w	x	y

block rows

a	b	c	d	e
f	g	h	i	j
k	l	m	n	o
p	q	r	s	t
u	v	w	x	y

cell blocks

a	b	c	d	e
f	g	h	i	j
k	l	m	n	o
p	q	r	s	t
u	v	w	x	y

table:hover {
    outline: dashed;
    tbody:hover {
        outline: dotted;
        tr {
            border: solid;
        }
    }
}
#tbody {tbody {display:block;}}
#tr {tr {display:block;}}
#td {td {display:block;}}