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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About Me - Sections and Navigation</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#skills">My Skills</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Home</h2>
            <p>This is the homepage of my personal website.</p>
            <img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1718974161470/e877015c-32db-4655-bd20-46aa93158a4f.jpg" alt="A photo of myself" width="300">
            <p>Learn more about me <a href="https://en.wikipedia.org/wiki/About.me" target="_blank">here</a></p>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>Hi! I'm a web development enthusiast eager to learn more.</p>
        </section>

        <section id="skills">
            <h2>Skills</h2>
            <p>Below is a table showcasing my skills and proficiency levels:</p>
            <table border="1">
                <thead>
                    <tr>
                        <th>Skill</th>
                        <th>Proficiency</th>
                        <th>Years of Experience</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>HTML</td>
                        <td>Intermediate</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>CSS</td>
                        <td>Intermediate</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>JavaScript</td>
                        <td>Beginner</td>
                        <td>&lt;0.5</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Personal Website</p>
    </footer>
</body>
</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.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal