From 5a72bac0e0931aeb345381f22fd34e58a11adae1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giftea=20=E2=98=95?= Date: Tue, 14 Oct 2025 00:53:38 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to tables lesson (#62715) --- .../672a4e04a24858778f57ebfe.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-tables/672a4e04a24858778f57ebfe.md b/curriculum/challenges/english/blocks/lecture-working-with-tables/672a4e04a24858778f57ebfe.md index ea2d1213d48..3e63f2a71d0 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-tables/672a4e04a24858778f57ebfe.md +++ b/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 @@ -59,6 +61,8 @@ Here's an example of code used to generate a table from the U.S. Bureau of Labor
``` +::: + 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 @@ -96,6 +102,8 @@ Here's the simplest table we can create that includes all of these elements:
``` +::: + 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.