---
id: 61fd6cc9475a784b7776233e
title: Step 7
challengeType: 0
dashedName: step-7
---
# --description--
Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables.
Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow.
# --hints--
You should create a new `div` element.
```js
assert(document.querySelectorAll('div')?.length === 2);
```
Your new `div` element should have the `class` set to `table-wrap`.
```js
assert(document.querySelector('.table-wrap')?.localName === 'div');
```
Your `.table-wrap` element should come after your existing `div`.
```js
assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
```
Your `.table-wrap` element should have three `table` elements.
```js
const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
assert(children?.length === 3);
children.forEach(child => assert(child?.localName === 'table'));
```
# --seed--
## --seed-contents--
```html
Balance Sheet