Lesson 4
Creating Skills Table
Creating a Skills Table

You're doing an excellent job building your About Me webpage! With navigation now in place, your visitors can easily explore different sections. Next, we’ll add more depth to your webpage by creating a skills table. This table will showcase your skills, proficiency, and experience in a well-organized format.

Integrate a Skills Table

To create a skills table, we'll use the <table> element along with its related elements.

Let's see how the structure a basic table will fit into your webpage:

HTML, XML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>About Me - Sections and Navigation</title> 6</head> 7<body> 8 <header> 9 <h1>Welcome to My Website</h1> 10 <nav> 11 <ul> 12 <li><a href="#home">Home</a></li> 13 <li><a href="#skills">My Skills</a></li> 14 </ul> 15 </nav> 16 </header> 17 <main> 18 <section id="home"> 19 <h2>Home</h2> 20 <p>This is the homepage of my personal website.</p> 21 <img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1718974161470/e877015c-32db-4655-bd20-46aa93158a4f.jpg" alt="A photo of myself" width="300"> 22 <p>Learn more about me <a href="https://en.wikipedia.org/wiki/About.me" target="_blank">here</a></p> 23 </section> 24 25 <section id="about"> 26 <h2>About Me</h2> 27 <p>Hi! I'm a web development enthusiast eager to learn more.</p> 28 </section> 29 30 <section id="skills"> 31 <h2>Skills</h2> 32 <p>Below is a table showcasing my skills and proficiency levels:</p> 33 <table border="1"> 34 <thead> 35 <tr> 36 <th>Skill</th> 37 <th>Proficiency</th> 38 <th>Years of Experience</th> 39 </tr> 40 </thead> 41 <tbody> 42 <tr> 43 <td>HTML</td> 44 <td>Intermediate</td> 45 <td>1</td> 46 </tr> 47 <tr> 48 <td>CSS</td> 49 <td>Intermediate</td> 50 <td>1</td> 51 </tr> 52 <tr> 53 <td>JavaScript</td> 54 <td>Beginner</td> 55 <td>&lt;0.5</td> 56 </tr> 57 </tbody> 58 </table> 59 </section> 60 </main> 61 <footer> 62 <p>&copy; 2024 My Personal Website</p> 63 </footer> 64</body> 65</html>

In the code snippet above, we've added a <table> element within the Skills section. The table consists of three columns: Skill, Proficiency, and Years of Experience. The <thead> element contains a row with column headings, while the <tbody> element contains rows with data.

In addition, pay attention to the &lt; symbol in the Years of Experience column. This is an HTML entity that represents the < character. Using HTML entities ensures that the browser interprets the character correctly.

Why It Matters

Tables are a fundamental HTML component used to display data systematically. Adding a skills table to your webpage has several benefits:

  • Clear Display of Information: A table allows you to present related data clearly and concisely.
  • Easy Comparison: Users can easily compare skills, proficiency levels, and years of experience side by side.
  • Professionalism: A well-organized table contributes to a more polished and professional webpage.

By mastering how to create and style tables, you'll enhance your webpage’s ability to convey detailed information in an accessible format. This not only improves user experience but also showcases your skills in an organized manner.

Excited to add this new feature to your webpage? Let’s jump into the practice section and build your skills table together!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.