Resume Website: HTML Tables — Programming Examples

Project purpose

Lesson 4 connected the resume website with hyperlinks and added a second page in a subfolder. Lesson 5 adds HTML tables for information that naturally fits rows and columns. The skills list on the resume becomes a skills table, and the project page gets a build log that records what each lesson added. The page layout itself stays in the HTML5 structure elements, because tables are for data, not for page structure.

Important: Only put information in a table that students are comfortable sharing on a public resume. A skills table should list real skills and where they were learned, not grades or personal details.

Lesson 5 goals

By the end of this build, students should be able to:

explain when content belongs in a table and when it does not
build a table with <table>, <caption>, <tr>, <th>, and <td>
use <th> for header cells in the top row and the left column
span a cell across columns with colspan and down rows with rowspan
style tables with CSS3 instead of the deprecated border attribute
use border, border-collapse, padding, width, background-color, text-align, and vertical-align on table elements
center a table with margin-left: auto and margin-right: auto
center only selected cells with a class such as td.center
explain why tables should not be used to lay out a whole page

Project setup

No new files or folders. Lesson 5 edits the existing files:

resume-website/
├── index.html                  (skills table)
├── documents/
│   └── resume.pdf
├── images/
│   └── profile.jpg
├── projects/
│   └── resume-website.html     (build log table)
└── styles/
    └── site.css                (table styles)

Instructor follow-along

1. Decide what belongs in a table

Talking points:

Tables were introduced in HTML 2.0 and are meant for tabular data: information that repeats in the same columns, such as prices, dates, schedules, and comparisons.
The <pre> tag can line up text, but it cannot be styled or aligned the way a table can.
A resume has two good candidates: skills (category, skill, where it was learned) and a log of what each lesson added to the project.
Long paragraphs and images usually do not belong in a table.

Pause and ask: Which section of the resume already repeats the same kind of information on every line?

2. Build the basic table structure

Talking points:

<table> holds everything else. <tr> creates a row. <td> creates a data cell inside a row.
<caption> gives the table a title. It must come right after the opening <table> tag and appears above the table by default.
Build the empty structure first, then add content. Put each element on its own line so it is easy to count rows and cells.
Every row in a simple table needs the same number of cells.

Pause and ask: How many <td> tags does each row need if the table has three columns?

3. Add header cells

Talking points:

<th> marks a header cell. By default its text is bold and centered.
The first row uses <th> for the column headings: Category, Skill, and Where I Learned It.
<th> can also label a row. In the skills table, the category in the left column is a <th>.
Data cells (<td>) are left-aligned by default.

Pause and ask: Why is “Web Development” a <th> instead of a <td>?

4. Span rows with rowspan

Talking points:

rowspan="4" makes one cell run down through four rows, so “Web Development” is written once for four skills.
The rows below that cell leave it out. They have only two cells instead of three.
rowspan works on both <th> and <td>.

Pause and ask: If a fifth web development skill is added, which number has to change?

5. Span columns with colspan

Talking points:

colspan="3" makes one cell stretch across all three columns.
The last row of the skills table has a single cell with a note that the table is updated after each lesson.
When a cell spans columns, remove the cells it replaces, or the row will stick out past the edge of the table.

Pause and ask: What happens to the table if the colspan row still has three <td> tags?

6. Style the table with CSS3

Talking points:

The HTML border attribute is deprecated and will not pass HTML5 validation. Use the CSS border property instead.
Tables have no visible border by default. table, th, td { border: 1px solid ...; } shows the grid.
border-collapse: collapse merges the double lines between cells into one line.
padding adds space between the cell content and its border.
background-color on th makes the header cells stand out.
width: 90% uses a percentage so the table fits small screens as well as large ones.

Pause and ask: What changes when border-collapse: collapse is removed?

7. Align tables and cell content

Talking points:

text-align controls horizontal alignment: left, center, right, or justify.
vertical-align controls vertical alignment: top, middle, or bottom. Setting vertical-align: top keeps short cells lined up with the first line of a taller neighbor.
A class such as td.center centers only the cells that use it, like <td class="center">.
table.center centers the whole table with margin-left: auto and margin-right: auto, the same way an image is centered.
Keep alignment consistent within each column. Numbers are often right-aligned like a spreadsheet.

Pause and ask: Why is the Lesson column in the build log centered while the What I Added column is left-aligned?

8. Add a build log to the project page

Talking points:

The project page gets a Build Log table with Lesson, Textbook Topic, and What I Added.
The same CSS file styles both tables, so the second table needs no new rules.
The page still uses ../ for the stylesheet, so the table styles load from the subfolder.

Pause and ask: The build log loads with no borders. What is the first thing to check?

9. Tables versus page layout

Talking points:

Older websites used invisible tables to lay out entire pages. That made pages hard to update, less accessible, and not responsive.
HTML5 uses <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> for structure, with CSS3 for layout.
Search engines can rank a page lower when tables are used for structure. Use tables tastefully and sparingly.
Frameworks such as Bootstrap offer responsive tables that scroll sideways on small screens. Students should recognize the idea, but the resume uses plain HTML and CSS.

Pause and ask: Why would converting an old table-based site to HTML5 structure elements make future updates easier?

10. Troubleshoot and validate

Talking points:

Common table mistakes: a missing </tr> or </td>, a row with too many or too few cells, a rowspan or colspan number that does not match the cells removed, and a <caption> that is not the first thing inside <table>.
Validate early, while the table is small, so errors are easy to find.
Validate both HTML pages and the stylesheet after adding tables.

Pause and ask: The validator says a row is wider than the column count. Where should you look first?

Starter CSS additions

Add these rules to the end of styles/site.css:

/* Lesson 5: table styles. Use CSS3, not the deprecated border attribute. */
table,
th,
td {
  border: 1px solid #cbb677;
}

table {
  width: 90%;
  border-collapse: collapse;
  font-size: 0.9em;
}

/* Center the table on the page, the same way as centering an image */
table.center {
  margin-left: auto;
  margin-right: auto;
}

caption {
  font-weight: bold;
  padding-bottom: 0.5em;
}

th,
td {
  padding: 5px;
  vertical-align: top;
}

th {
  background-color: #efe6c8;
}

/* Center only the cells that use this class */
td.center {
  text-align: center;
}

Updated Skills section in `index.html` (Lesson 5 revisions)

Replace the skills <ul> with this table. The rest of index.html stays the same as Lesson 4, except the Projects paragraph can add a sentence about Lesson 5.

    <h2><a id="skills">Skills</a></h2>
    <table class="center"> <!-- new: tabular data belongs in a table -->
      <caption>Skills and Where I Learned Them</caption>
      <tr>
        <th>Category</th>
        <th>Skill</th>
        <th>Where I Learned It</th>
      </tr>
      <tr>
        <th rowspan="4">Web Development</th> <!-- new: rowspan covers four rows -->
        <td>HTML5 document structure and valid markup</td>
        <td class="center">Lesson 2</td>
      </tr>
      <tr>
        <td>CSS3 styling and external stylesheets</td>
        <td class="center">Lesson 3</td>
      </tr>
      <tr>
        <td>Hyperlinks: local, external, internal, and image links</td>
        <td class="center">Lesson 4</td>
      </tr>
      <tr>
        <td>HTML tables styled with CSS3</td>
        <td class="center">Lesson 5</td>
      </tr>
      <tr>
        <th rowspan="2">Professional</th>
        <td>Problem solving</td>
        <td class="center">Work or volunteer experience</td>
      </tr>
      <tr>
        <td>Written and verbal communication</td>
        <td class="center">Work or volunteer experience</td>
      </tr>
      <tr>
        <td colspan="3" class="center">This table is updated after each lesson.</td> <!-- new: colspan covers three columns -->
      </tr>
    </table>
    <p><a href="#top">Back to top</a></p>

New Build Log section in `projects/resume-website.html`

Add this after the “What I Have Learned So Far” list:

    <h2>Build Log</h2>
    <p>Each lesson of IST 1433 adds something new to this website.</p>
    <table class="center">
      <caption>Resume Website Build Log</caption>
      <tr>
        <th>Lesson</th>
        <th>Textbook Topic</th>
        <th>What I Added</th>
      </tr>
      <tr>
        <td class="center">2</td>
        <td>HTML5 Coding</td>
        <td>Page structure, headings, paragraphs, and lists</td>
      </tr>
      <tr>
        <td class="center">3</td>
        <td>CSS3 and Graphical Elements</td>
        <td>An external stylesheet, a profile image, and HTML5 structure elements</td>
      </tr>
      <tr>
        <td class="center">4</td>
        <td>Hyperlinks</td>
        <td>Navigation, bookmarks, external links, a PDF, and this project page</td>
      </tr>
      <tr>
        <td class="center">5</td>
        <td>HTML Tables</td>
        <td>The skills table on my resume and this build log</td>
      </tr>
    </table>

Student customization checklist

Validation and testing

Count the cells in every row of both tables, remembering that spanned cells count more than once.
Confirm the Skills link in the nav bar still jumps to the skills table.
Validate index.html and projects/resume-website.html with the W3C Nu HTML Checker.
Validate styles/site.css with the W3C CSS Validation Service.
Temporarily remove border-collapse: collapse to see the double borders, then put it back.
Open both pages at a narrow window size and confirm the tables still fit.

Lesson 5 design decisions

Tables hold only tabular data. The page structure from Lesson 3 is unchanged, matching the textbook’s advice against table layouts.
Borders, alignment, and colors come from CSS3, because the HTML border attribute is deprecated and fails validation.
The table width is a percentage so it fits small screens, as the textbook recommends.
td.center and table.center follow the class names used in Lab 5-1.
The left-column categories are <th> cells, matching the textbook’s note that header cells can be in the top row or left column.
<thead>, <tbody>, and Bootstrap responsive tables are not used, because the chapter does not teach them.

Next lesson checkpoint

Keep both HTML files and styles/site.css as the source of truth. The next lesson adds Web forms while keeping the links, navigation, and tables working.

Project purpose

Lesson 5 goals

Project setup

Instructor follow-along

1. Decide what belongs in a table

2. Build the basic table structure

3. Add header cells

4. Span rows with rowspan

5. Span columns with colspan

6. Style the table with CSS3

7. Align tables and cell content

8. Add a build log to the project page

9. Tables versus page layout

10. Troubleshoot and validate

Starter CSS additions

Updated Skills section in index.html (Lesson 5 revisions)

New Build Log section in projects/resume-website.html

Student customization checklist

Validation and testing

Lesson 5 design decisions

Next lesson checkpoint

Updated Skills section in `index.html` (Lesson 5 revisions)

New Build Log section in `projects/resume-website.html`