Stage 2: Frontend Fundamentals

HTML · Lesson 04

Tables

Rows, columns, headers, captions, colspan and rowspan for presenting structured data.

HTML3 min readFree lesson

Learn how to structure data into rows and columns and present it as a table.

1. What Is a Table?

An HTML table arranges data in a grid made of rows and columns.
Think of it as expressing an Excel spreadsheet in HTML.

Note: Tables are used to present data.
In the past, tables were also used to lay out web pages,
but today the correct approach is to use CSS Flexbox/Grid.

2. Basic Table Structure

<table>
  <thead>          <!-- table header section -->
    <tr>           <!-- row (table row) -->
      <th>Name</th>    <!-- header cell (table header) -->
      <th>Age</th>
      <th>Occupation</th>
    </tr>
  </thead>
  <tbody>          <!-- table body section -->
    <tr>
      <td>John Doe</td>  <!-- data cell (table data) -->
      <td>25</td>
      <td>Student</td>
    </tr>
    <tr>
      <td>Chris Kim</td>
      <td>30</td>
      <td>Developer</td>
    </tr>
  </tbody>
  <tfoot>          <!-- table footer section -->
    <tr>
      <td colspan="3">2 people in total</td>   <!-- colspan: merge multiple columns -->
    </tr>
  </tfoot>
</table>

3. Table Tags in Detail

table

The top-level tag that wraps the entire table.

<table border="1">  <!-- the border attribute is not recommended in HTML5. Use CSS instead -->

thead, tbody, tfoot

These split a table into three sections:

Tag Role Characteristics
<thead> Header rows Usually holds the column titles
<tbody> Body data rows Holds the actual data; optional, but recommended
<tfoot> Footer rows Holds totals, summaries, and so on 
<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Food</td>
      <td>₩300,000</td>
    </tr>
    <tr>
      <td>Transportation</td>
      <td>₩50,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>₩350,000</td>
    </tr>
  </tfoot>
</table>

tr - Row (Table Row)

Represents one row of a table. Used inside <thead>, <tbody>, and <tfoot>.

th - Header Cell (Table Header)

<th scope="col">Name</th>    <!-- column heading -->
<th scope="row">Row 1</th>     <!-- row heading -->
  • By default they are displayed in bold and centered.
  • The scope attribute states which direction the heading applies to (important for accessibility)

td - Data Cell (Table Data)

<td>John Doe</td>
<td>25</td>
<td>Seoul</td>

4. Merging Cells

colspan - Column Merge

Merges several cells horizontally.

<table border="1">
  <tr>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
  </tr>
  <tr>
    <td>Math</td>
    <td colspan="2">English (2 hours)</td>   <!-- merge 2 columns -->
  </tr>
</table>

Result:

┌─────┬─────┬─────┐
│ Mon │ Tue │ Wed │
├─────┼───────────┤
│Math │ English(2)│
└─────┴───────────┘

rowspan - Row Merge

Merges several cells vertically.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Score</th>
  </tr>
  <tr>
    <td rowspan="2">John Doe</td>   <!-- merge 2 rows -->
    <td>Math</td>
    <td>90</td>
  </tr>
  <tr>
    <!-- the cell merged by rowspan occupies this position, so td is omitted -->
    <td>English</td>
    <td>85</td>
  </tr>
</table>

Result:

┌──────────┬─────────┬──────┐
│   Name   │ Subject │Score │
├──────────┼─────────┼──────┤
│          │  Math   │  90  │
│ John Doe ├─────────┼──────┤
│          │ English │  85  │
└──────────┴─────────┴──────┘

Using colspan and rowspan Together

<table border="1">
  <tr>
    <th>Category</th>
    <th colspan="2">Semester 1</th>   <!-- merge 2 columns -->
    <th colspan="2">Semester 2</th>   <!-- merge 2 columns -->
  </tr>
  <tr>
    <th>Name</th>
    <th>Midterm</th>
    <th>Final</th>
    <th>Midterm</th>
    <th>Final</th>
  </tr>
  <tr>
    <td rowspan="2">Seoul Class</td>  <!-- merge 2 rows -->
    <td>John Doe 90</td>
    <td>John Doe 85</td>
    <td>John Doe 88</td>
    <td>John Doe 92</td>
  </tr>
  <tr>
    <!-- the space taken by the cell merged with rowspan -->
    <td>Emma Kim 95</td>
    <td>Emma Kim 91</td>
    <td>Emma Kim 93</td>
    <td>Emma Kim 97</td>
  </tr>
</table>

5. The scope Attribute (Accessibility)

Set scope on <th> tags so that screen readers read the table correctly.

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>     <!-- this th is the heading for a column -->
      <th scope="col">Math</th>
      <th scope="col">English</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Class 1</th>      <!-- this th is the heading for a row -->
      <td>90</td>
      <td>85</td>
    </tr>
    <tr>
      <th scope="row">Class 2</th>
      <td>88</td>
      <td>92</td>
    </tr>
  </tbody>
</table>

6. caption - Table Title

<table>
  <caption>Q1 2026 Sales Results</caption>
  <!-- caption: the table's title. Write it first, directly inside the table -->
  <thead>
    ...
  </thead>
</table>

Summary

Tag/Attribute Description
<table> Container for the whole table
<caption> Table title
<thead> Table header section
<tbody> Table body section
<tfoot> Table footer section
<tr> Row (Table Row)
<th> Header cell (bold, centered)
<td> Data cell
colspan="n" Merge n columns (horizontal)
rowspan="n" Merge n rows (vertical)
scope="col" Declares that this th is a column heading
scope="row" Declares that this th is a row heading

Next Steps

  • View the example file - a weekly class timetable example
  • Check the assignment - build a monthly expense report
  • Next lesson: Forms

Example files

Complete, runnable files used in this lesson. Copy them into your project and experiment.

schedule.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weekly Class Timetable</title>
</head>
<body>

  <h1>2026 Semester 1 Weekly Class Timetable</h1>
  <p>Department of Computer Engineering, Sophomore Class 1 - Homeroom teacher: Mr. Kim</p>

  <table border="1">
    <!-- caption: the table title. It is written first inside the table -->
    <caption>Weekly Class Timetable (Mon-Fri)</caption>

    <thead>
      <!-- thead: the section that groups the table's header rows -->
      <tr>
        <!-- tr: a single row (horizontal line) -->
        <th scope="col">Period</th>
        <!-- th: header cell. Bold and centered by default -->
        <!-- scope="col": this th is the heading for the whole column (vertical direction) -->
        <th scope="col">Time</th>
        <th scope="col">Monday</th>
        <th scope="col">Tuesday</th>
        <th scope="col">Wednesday</th>
        <th scope="col">Thursday</th>
        <th scope="col">Friday</th>
      </tr>
    </thead>

    <tbody>
      <!-- tbody: the section that groups the table's body data rows -->

      <!-- Period 1 -->
      <tr>
        <th scope="row">Period 1</th>
        <!-- scope="row": this th is the heading for the whole row (horizontal direction) -->
        <td>09:00-09:50</td>
        <td>HTML/CSS</td>
        <td>Database</td>
        <td>Algorithms</td>
        <td>HTML/CSS</td>
        <td>Operating Systems</td>
      </tr>

      <!-- Period 2 -->
      <tr>
        <th scope="row">Period 2</th>
        <td>10:00-10:50</td>
        <td>HTML/CSS</td>
        <td>Database</td>
        <td>Algorithms</td>
        <td>JavaScript</td>
        <td>Operating Systems</td>
      </tr>

      <!-- Period 3 -->
      <tr>
        <th scope="row">Period 3</th>
        <td>11:00-11:50</td>
        <td>JavaScript</td>
        <td>Computer Networks</td>
        <td>Data Structures</td>
        <td>JavaScript</td>
        <td>Capstone Design</td>
      </tr>

      <!-- Lunch: merge the 5 weekday cells into one with colspan -->
      <tr>
        <th scope="row">Lunch</th>
        <td>12:00-13:00</td>
        <td colspan="5">Lunch and break</td>
        <!-- colspan="5": this cell takes up 5 columns (the 5 days Mon-Fri) -->
      </tr>

      <!-- Period 4 -->
      <tr>
        <th scope="row">Period 4</th>
        <td>13:00-13:50</td>
        <td>Software Engineering</td>
        <td>Computer Networks</td>
        <td>Data Structures</td>
        <td>Database</td>
        <td>Capstone Design</td>
      </tr>

      <!-- Period 5 -->
      <tr>
        <th scope="row">Period 5</th>
        <td>14:00-14:50</td>
        <td>Software Engineering</td>
        <td>Algorithms</td>
        <td>Data Structures</td>
        <td>Database</td>
        <td>Capstone Design</td>
      </tr>

      <!-- Period 6 -->
      <tr>
        <th scope="row">Period 6</th>
        <td>15:00-15:50</td>
        <td>Free Practice</td>
        <td>Algorithms</td>
        <td>Computer Networks</td>
        <!-- rowspan: the Thursday free time covers Period 6 and Period 7, 2 rows -->
        <td rowspan="2">Free Activity</td>
        <!-- rowspan="2": this cell takes up 2 rows (vertical direction) -->
        <td>Club Activities</td>
      </tr>

      <!-- Period 7 -->
      <tr>
        <th scope="row">Period 7</th>
        <td>16:00-16:50</td>
        <td>Free Practice</td>
        <td>Special Lecture (Optional)</td>
        <td>Computer Networks</td>
        <!-- the cell merged with rowspan takes this position, so no td is written -->
        <td>Club Activities</td>
      </tr>

    </tbody>

    <tfoot>
      <!-- tfoot: the section that groups the table's footer rows (mostly totals and summaries) -->
      <tr>
        <td colspan="2">Weekly class hours</td>
        <!-- colspan="2": merge the Period and Time cells into one -->
        <td>14 hours</td>
        <td>14 hours</td>
        <td>14 hours</td>
        <td>12 hours</td>
        <td>14 hours</td>
      </tr>
    </tfoot>

  </table>

  <hr>

  <h2>Course Professors</h2>

  <table border="1">
    <caption>2026 Semester 1 Professor List</caption>
    <thead>
      <tr>
        <th scope="col">Subject</th>
        <th scope="col">Professor</th>
        <th scope="col">Classroom</th>
        <th scope="col">Contact</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HTML/CSS</td>
        <!-- rowspan="2": the HTML/CSS professor also teaches JavaScript -->
        <td rowspan="2">Prof. Alex Lee</td>
        <td>Engineering Building 301</td>
        <td rowspan="2">[email protected]</td>
        <!-- rowspan="2": the email cell also spans two rows -->
      </tr>
      <tr>
        <td>JavaScript</td>
        <!-- the professor and email cells are omitted from this row because of the rowspan above -->
        <td>Engineering Building 302</td>
      </tr>
      <tr>
        <td>Database</td>
        <td>Prof. Daniel Park</td>
        <td>Engineering Building 401</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Algorithms</td>
        <td rowspan="2">Prof. Kevin Choi</td>
        <!-- rowspan="2": teaches both Algorithms and Data Structures -->
        <td>Information Science Building 201</td>
        <td rowspan="2">[email protected]</td>
      </tr>
      <tr>
        <td>Data Structures</td>
        <td>Information Science Building 201</td>
      </tr>
      <tr>
        <td>Computer Networks</td>
        <td>Prof. Nathan Jung</td>
        <td>Information Science Building 301</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Operating Systems</td>
        <td>Prof. Oliver Kim</td>
        <td>Engineering Building 101</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Software Engineering</td>
        <td>Prof. Henry Hong</td>
        <td>Engineering Building 201</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Capstone Design</td>
        <!-- colspan="2": merge the classroom and contact cells to show "Announced separately per team" -->
        <td>Choose an advisor</td>
        <td colspan="2">Announced separately after team advisors are assigned</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Assignment

Lesson 04 Assignment — Build My Monthly Expense Report

Assignment Goal

Use HTML table tags to turn one month of personal spending into a table.

Requirements Checklist

Basic Table Structure

  • Wrap the whole table in a <table> tag
  • Give the table a title with a <caption> tag (e.g. "May 2026 Expenses")
  • Divide the table into 3 sections: <thead>, <tbody>, <tfoot>
  • Use <tr>, <th>, and <td> appropriately

Header (thead)

  • Column titles: Date, Category, Item, Amount (4 or more)
  • Add the scope="col" attribute to every <th>

Body (tbody)

  • Enter at least 10 expense items
  • Use at least 3 categories (e.g. food, transportation, leisure, phone and internet)
  • Show the category as a row header (<th scope="row">) and use rowspan

Cell Merging (required)

  • Use colspan at least once (e.g. merge the "Date" + "Category" + "Item" cells into 3 columns in the total row)
  • Use rowspan at least once (e.g. group several items in the same category into one)

Footer (tfoot)

  • Include a per-category subtotal row or an overall total row
  • Use an appropriate colspan in the total row

Sample Table Layout

| Date  | Category     | Item             | Amount    |
|-------|--------------|------------------|-----------|
| 5/1   |              | Convenience store| ₩3,500    |
| 5/3   | Food         | Lunch            | ₩8,000    |
| 5/8   |              | Fried chicken    | ₩20,000   |
| 5/5   | Transportation| Subway top-up   | ₩10,000   |
| 5/10  |              | Bus card         | ₩5,000    |
|       |              | [Food subtotal]  | ₩31,500   |
|       |              | [Transport subtotal] | ₩15,000 |
|       | [Grand total]                   | ₩46,500   |

Using rowspan means that one category cell covers several rows, so a category does not have to be repeated on every row.

Hints

Hint 1: Group categories with rowspan

If a category has 3 items, use rowspan="3":

<tbody>
  <tr>
    <td>5/1</td>
    <td rowspan="3">Food</td>  <!-- the food cell covers 3 rows -->
    <td>Convenience store</td>
    <td>₩3,500</td>
  </tr>
  <tr>
    <td>5/3</td>
    <!-- the food cell already covers this row through rowspan above, so it is not here -->
    <td>Lunch</td>
    <td>₩8,000</td>
  </tr>
  <tr>
    <td>5/8</td>
    <!-- food cell omitted -->
    <td>Fried chicken</td>
    <td>₩20,000</td>
  </tr>
</tbody>
Hint 2: Show the total with colspan in tfoot 
<tfoot>
  <tr>
    <!-- merge the Date, Category, and Item cells to show "Total May Spending" -->
    <td colspan="3">Total May spending</td>
    <td>₩XXX,XXX</td>
  </tr>
</tfoot>
Hint 3: Create a subtotal row for each category

Add a subtotal row inside tbody at the end of each category:

<tbody>
  <!-- food items... -->
  <tr>
    <!-- merge the Date and Category cells to show "Food subtotal" -->
    <td colspan="2">Food subtotal</td>
    <td>Items: 3</td>
    <td>₩31,500</td>
  </tr>
</tbody>
Hint 4: Use the scope attribute 
<!-- column headings -->
<thead>
  <tr>
    <th scope="col">Date</th>
    <th scope="col">Category</th>
    <th scope="col">Item</th>
    <th scope="col">Amount</th>
  </tr>
</thead>

<!-- row headings (when the category is written as a th) -->
<tbody>
  <tr>
    <td>5/1</td>
    <th scope="row" rowspan="3">Food</th>  <!-- this th is the heading for 3 rows -->
    <td>Convenience store</td>
    <td>₩3,500</td>
  </tr>
</tbody>

File Name

Save it as schedule.html.

Extra Challenges (optional)

  • Build a combined income and expense household budget table that also records income
  • Add a table that compares the budget for each category with the actual spending

Grading Criteria

Item Points
Use of caption, thead, tbody, tfoot 20 points
Use of the scope attribute on th 10 points
10 or more expense items 15 points
Correct use of rowspan 25 points
Correct use of colspan 20 points
Realism and completeness of the content 10 points
Total 100 points
Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

schedule.htmlHTML
<!DOCTYPE html>
<!-- HTML5 document declaration -->
<html lang="en">
<!-- set the document language to English -->
<head>
  <meta charset="UTF-8">
  <!-- prevents garbled characters -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>May Monthly Expense Report</title>
</head>
<body>

  <h1>My Monthly Expenses</h1>
  <p>A household budget that organizes my personal spending for May 2026 by category.</p>

  <!-- ============================== -->
  <!-- main expense table             -->
  <!-- ============================== -->
  <table border="1">
  <!-- table: the top-level tag that wraps the entire table -->
  <!-- border="1": a temporary border. For checking without CSS (real projects use CSS) -->

    <caption>May 2026 Expense Report</caption>
    <!-- caption: the table title. Written first, directly inside the table tag -->

    <!-- ====== table header section ====== -->
    <thead>
    <!-- thead: the section that groups the table's header rows -->
      <tr>
      <!-- tr: a single row (horizontal line) -->
        <th scope="col">Date</th>
        <!-- th: header cell (automatically bold and centered) -->
        <!-- scope="col": states that this th is the heading for the whole column (vertical) (accessibility) -->
        <th scope="col">Category</th>
        <th scope="col">Item</th>
        <th scope="col">Payment Method</th>
        <th scope="col">Amount</th>
      </tr>
    </thead>

    <!-- ====== table body section ====== -->
    <tbody>
    <!-- tbody: the body section that holds the actual data -->

      <!-- ============ food items (4) ============ -->
      <tr>
        <td>May 1</td>
        <th scope="row" rowspan="4">Food</th>
        <!-- th scope="row": states that this th is the heading for the row (horizontal) direction -->
        <!-- rowspan="4": this cell covers 4 rows below (because there are 4 food items) -->
        <td>Convenience store lunch box</td>
        <td>Cash</td>
        <td>₩4,500</td>
      </tr>
      <tr>
        <td>May 3</td>
        <!-- the "Food" cell already covers this row through rowspan, so no category td is written -->
        <td>Lunch near the office</td>
        <td>Card</td>
        <td>₩9,000</td>
      </tr>
      <tr>
        <td>May 10</td>
        <!-- food cell omitted (because of rowspan) -->
        <td>Fried chicken delivery</td>
        <td>Card</td>
        <td>₩22,000</td>
      </tr>
      <tr>
        <td>May 20</td>
        <!-- food cell omitted (because of rowspan) -->
        <td>Grocery shopping</td>
        <td>Card</td>
        <td>₩47,300</td>
      </tr>

      <!-- food subtotal row -->
      <tr>
        <td colspan="2">Food subtotal</td>
        <!-- colspan="2": merge the Date and Category cells into one -->
        <td>4 items</td>
        <td>-</td>
        <td>₩82,800</td>
      </tr>

      <!-- ============ transportation items (3) ============ -->
      <tr>
        <td>May 2</td>
        <th scope="row" rowspan="3">Transportation</th>
        <!-- rowspan="3": the transportation cell covers 3 rows -->
        <td>Subway transit card top-up</td>
        <td>Card</td>
        <td>₩30,000</td>
      </tr>
      <tr>
        <td>May 9</td>
        <!-- transportation cell omitted -->
        <td>Taxi fare (late-night work)</td>
        <td>Card</td>
        <td>₩12,000</td>
      </tr>
      <tr>
        <td>May 15</td>
        <!-- transportation cell omitted -->
        <td>KTX trip to hometown</td>
        <td>Card</td>
        <td>₩55,700</td>
      </tr>

      <!-- transportation subtotal -->
      <tr>
        <td colspan="2">Transportation subtotal</td>
        <td>3 items</td>
        <td>-</td>
        <td>₩97,700</td>
      </tr>

      <!-- ============ culture and leisure items (3) ============ -->
      <tr>
        <td>May 4</td>
        <th scope="row" rowspan="3">Culture/Leisure</th>
        <!-- rowspan="3": the culture/leisure cell covers 3 rows -->
        <td>Movie tickets (2 people)</td>
        <td>Card</td>
        <td>₩28,000</td>
      </tr>
      <tr>
        <td>May 11</td>
        <!-- culture/leisure cell omitted -->
        <td>Book purchase (2 books)</td>
        <td>Card</td>
        <td>₩32,000</td>
      </tr>
      <tr>
        <td>May 25</td>
        <!-- culture/leisure cell omitted -->
        <td>Gym monthly membership</td>
        <td>Card auto-payment</td>
        <td>₩60,000</td>
      </tr>

      <!-- culture and leisure subtotal -->
      <tr>
        <td colspan="2">Culture/Leisure subtotal</td>
        <td>3 items</td>
        <td>-</td>
        <td>₩120,000</td>
      </tr>

      <!-- ============ phone and subscription items (2) ============ -->
      <tr>
        <td>May 1</td>
        <th scope="row" rowspan="2">Phone/Subscriptions</th>
        <!-- rowspan="2": the phone/subscriptions cell covers 2 rows -->
        <td>Mobile phone bill</td>
        <td>Card auto-payment</td>
        <td>₩55,000</td>
      </tr>
      <tr>
        <td>May 1</td>
        <!-- phone/subscriptions cell omitted -->
        <td>Netflix subscription</td>
        <td>Card auto-payment</td>
        <td>₩17,000</td>
      </tr>

      <!-- phone and subscriptions subtotal -->
      <tr>
        <td colspan="2">Phone/Subscriptions subtotal</td>
        <td>2 items</td>
        <td>-</td>
        <td>₩72,000</td>
      </tr>

    </tbody>

    <!-- ====== table footer section ====== -->
    <tfoot>
    <!-- tfoot: the table's footer (totals, summaries) section -->
      <tr>
        <td colspan="3">May total spending (12 items)</td>
        <!-- colspan="3": merge the Date, Category, and Item cells into one -->
        <td>Card: mostly used</td>
        <td>₩372,500</td>
      </tr>
    </tfoot>

  </table>

  <hr>

  <!-- ============================== -->
  <!-- spending by category summary   -->
  <!-- ============================== -->
  <h2>Spending Summary by Category</h2>

  <table border="1">
    <caption>May 2026 Spending Share by Category</caption>
    <!-- caption: the title of the second table -->

    <thead>
      <tr>
        <th scope="col">Category</th>
        <th scope="col">Amount Spent</th>
        <th scope="col">Items</th>
        <th scope="col">Share of Total</th>
        <th scope="col">Notes</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row">Food</th>
        <!-- scope="row": this th is the heading for the whole row -->
        <td>₩82,800</td>
        <td>4</td>
        <td>22.2%</td>
        <!-- rowspan: group Food and Transportation as "Essential" categories -->
        <td rowspan="2">Essential</td>
        <!-- rowspan="2": this cell covers 2 rows (Food, Transportation) -->
      </tr>
      <tr>
        <th scope="row">Transportation</th>
        <td>₩97,700</td>
        <td>3</td>
        <td>26.2%</td>
        <!-- notes cell omitted (because of rowspan) -->
      </tr>
      <tr>
        <th scope="row">Culture/Leisure</th>
        <td>₩120,000</td>
        <td>3</td>
        <td>32.3%</td>
        <!-- rowspan: group Culture/Leisure and Phone/Subscriptions as "Optional" -->
        <td rowspan="2">Optional</td>
        <!-- rowspan="2": this cell covers 2 rows (Culture/Leisure, Phone/Subscriptions) -->
      </tr>
      <tr>
        <th scope="row">Phone/Subscriptions</th>
        <td>₩72,000</td>
        <td>2</td>
        <td>19.3%</td>
        <!-- notes cell omitted (because of rowspan) -->
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td>₩372,500</td>
        <td>12</td>
        <td>100%</td>
        <td>-</td>
      </tr>
    </tfoot>

  </table>

  <hr>

  <p>
    <strong>Analysis:</strong> Culture and leisure spending was the highest this month.
    Transportation was also higher than expected because of the KTX trip.
    Next month the goal is to reduce food and leisure costs.
  </p>

</body>
</html>

Learn this lesson with a mentor

Work through the Build Your Homepage series on your own, or join a guided cohort at our Pitampura campus and online.

Enroll nowStage overview
Call NowEnroll Now