md ` ## Building a Table Header Next, we need some HTML DOM to manipulate. One way to do this in observable is to declare the HTML as a variable: \`\`\`js const table = html\`

\`; \`\`\` We can then select this HTML object by feeding it into a D3 select call. \`\`\`js let tableObject = d3.select(table); \`\`\` In environments outside of Observable you can pass a CSS selector into the "select" call to select a specific element from the DOM. Next, we'll modify the table. First, we are going to add a header row to the table. To do this we execute the following code: \`\`\`javascript tableObject.append("tr") // 1. Append a element to the table .selectAll("th") // 2. Select all elements in the (there are none) .data(data_as_array[0]) // 3. "Join" that selection to the first row in the CSV data we recieved (an array of string column headers) .enter() // 4. Perform another selection - getting all elements that do not exist in the table header yet .append("th") // 5. Take this selection (which is all the elements) and append a element .text(d => d); // 6. Put each array element inside the element - creating our column headers \`\`\` This may need some additional explanation. Step 1 is easy to explain. we take the table and append a table row. After that's done the html looks like this: \`\`\`html

\`\`\` Step 2 is a little stranger - we select all \`\`\`\` elements. Clearly there are non, but we're about to change that using what's called a D3 "join" in Step 3. The join takes our array of strings and binds it to the selection we just made. Now any missing elements will be exposed with the call to enter(). When something's missing we append \`\`\`\` (step 5) and then put whatever the data is that we have in the array inside the tag (step 6). In the end the html looks like this. \`\`\`html ...

Code	Occupation_Name

\`\`\` You can see this in action in the Observable code block below: `