feat(curriculum): Add interactive examples to tables lesson (#62715)

curriculum/challenges/english/blocks/lecture-working-with-tables/672a4e04a24858778f57ebfe.md

@@ -5,12 +5,14 @@ challengeType: 19
 dashedName: what-are-html-tables-used-for
 ---
 
-# --description--
+# --interactive--
 
 HTML tables aren't used as much these days as they used to be. But, as a frontend developer, you should still be familiar with them. Tables are one of the earliest ways devs had for displaying data in a browser way back in the 1990s.
 
 Here's an example of code used to generate a table from the U.S. Bureau of Labor Statistics:
 
+:::interactive_editor
+
 ```html
 <table id="quickfacts">
   <thead>
@@ -59,6 +61,8 @@ Here's an example of code used to generate a table from the U.S. Bureau of Labor
 </table>
 ```
 
+:::
+
 As you can see, there's a main `table` element with an `id` set to `quickfacts`. Inside it, the table has a table head element, `thead`, table body element, `tbody`, and a table foot element, `tfoot`.
 
 The table head, body, and foot elements can each contain some number of table rows, `tr`. And each table row can contain a table header `th` which labels the data in that row. It can also contain some number of individual data cells, called table data, `td`.
@@ -67,6 +71,8 @@ Now, that's a lot of HTML elements. But don't be intimidated – these follow a
 
 Here's the simplest table we can create that includes all of these elements:
 
+:::interactive_editor
+
 ```html
 <table>
   <thead>
@@ -96,6 +102,8 @@ Here's the simplest table we can create that includes all of these elements:
 </table>
 ```
 
+:::
+
 So as you can see, the data itself is always within a `tr` – and within that `tr` element is a `th` element with a header, and a `td` element with data.
 
 Some websites will choose to use `div`s to build their own tables instead of using the more appropriate `table` element.