Lesson 09, pandas dataframes

Author: nsohail19

.gitignore

@@ -1,4 +1,5 @@
 /.quarto/
 .DS_Store
 lessons/data
-lessons/results
+lesons/data.zip
+lessons/results

css/styles.css

@@ -177,6 +177,7 @@ img {
 /* --- Styled Markdown Tables --- */
 
 table {
+  /* Ensure tables expand to the full width of the text/page column */
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #d0d0d0;      /* outer border */
@@ -187,10 +188,12 @@ table {
   box-shadow: 0px 2px 5px rgba(0,0,0,0.08);   /* subtle lift */
 }
 
+/* Simple: enforce left alignment for all table cell text (headers + body) */
 table th,
 table td {
   border: 1px solid #e5e5e5;      /* internal grid lines */
   padding: 0.55em 0.75em;
+  text-align: left;               /* TABLE TEXT LEFT ALIGNED */
 }
 
 table th {
@@ -208,9 +211,53 @@ table thead th {
   border: 1px solid #8b1628 !important;  /* darker crimson border */
 }
 
-/* Left align table captions generated by Quarto */
-.quarto-float-tbl .quarto-float-caption {
-  text-align: left !important;
+/* 
+   Ensure table containers also stretch to the full width of the page's text column.
+   Quarto often wraps tables in .quarto-table and/or .table-responsive, which may
+   otherwise impose max-width constraints smaller than the page width.
+*/
+.quarto-table,
+.table-responsive {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+/* Table floats/captions: ensure table + caption use full content width (don't shrink to caption) */
+.quarto-float,
+.quarto-float-tbl {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+/* 
+   Style table captions so they:
+   - are left aligned (as requested),
+   - span the same width as the table,
+   - use the same light gray background (#f5f5f5) as your outputs.
+*/
+.quarto-float .quarto-float-caption,
+.quarto-float-tbl .quarto-float-caption,
+table caption {
+  text-align: left !important;          /* TABLE CAPTIONS LEFT ALIGNED */
+  width: 100% !important;
+  display: block !important;
+  box-sizing: border-box !important;
+  margin-bottom: 0.5em;
+  background-color: #f5f5f5;            /* same gray as used elsewhere */
+  padding: 0.4em 0.75em;
+}
+
+/* Make sure the actual table uses the full width of its float/container */
+.quarto-float-tbl table,
+.quarto-float-tbl .quarto-table,
+.quarto-float table,
+.quarto-float .quarto-table {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 0 !important;
 }
 
 /* Center Quarto figures and their contents */

docs/css/styles.css

@@ -177,6 +177,7 @@ img {
 /* --- Styled Markdown Tables --- */
 
 table {
+  /* Ensure tables expand to the full width of the text/page column */
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #d0d0d0;      /* outer border */
@@ -187,10 +188,12 @@ table {
   box-shadow: 0px 2px 5px rgba(0,0,0,0.08);   /* subtle lift */
 }
 
+/* Simple: enforce left alignment for all table cell text (headers + body) */
 table th,
 table td {
   border: 1px solid #e5e5e5;      /* internal grid lines */
   padding: 0.55em 0.75em;
+  text-align: left;               /* TABLE TEXT LEFT ALIGNED */
 }
 
 table th {
@@ -208,9 +211,53 @@ table thead th {
   border: 1px solid #8b1628 !important;  /* darker crimson border */
 }
 
-/* Left align table captions generated by Quarto */
-.quarto-float-tbl .quarto-float-caption {
-  text-align: left !important;
+/* 
+   Ensure table containers also stretch to the full width of the page's text column.
+   Quarto often wraps tables in .quarto-table and/or .table-responsive, which may
+   otherwise impose max-width constraints smaller than the page width.
+*/
+.quarto-table,
+.table-responsive {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+/* Table floats/captions: ensure table + caption use full content width (don't shrink to caption) */
+.quarto-float,
+.quarto-float-tbl {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+/* 
+   Style table captions so they:
+   - are left aligned (as requested),
+   - span the same width as the table,
+   - use the same light gray background (#f5f5f5) as your outputs.
+*/
+.quarto-float .quarto-float-caption,
+.quarto-float-tbl .quarto-float-caption,
+table caption {
+  text-align: left !important;          /* TABLE CAPTIONS LEFT ALIGNED */
+  width: 100% !important;
+  display: block !important;
+  box-sizing: border-box !important;
+  margin-bottom: 0.5em;
+  background-color: #f5f5f5;            /* same gray as used elsewhere */
+  padding: 0.4em 0.75em;
+}
+
+/* Make sure the actual table uses the full width of its float/container */
+.quarto-float-tbl table,
+.quarto-float-tbl .quarto-table,
+.quarto-float table,
+.quarto-float .quarto-table {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 0 !important;
 }
 
 /* Center Quarto figures and their contents */