Welcome to the final step in this course! So far, you've successfully built a webpage with a header, footer, various sections, internal links, and even some interactivity. In this lesson, we will focus on integrating a skills table into your webpage. This will be especially useful for personal portfolios, helping you display your skills clearly and professionally.
In this lesson, you will learn how to:
- Create a Table: Use HTML table elements to display data in a structured format.
- Integrate the Skills Table: Add a new section to your webpage specifically for your skills.
Here's a quick example of what the skills table will look like:
HTML, XML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>My Website</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="#About">About</a></li> 14 <li><a href="#Projects">Projects</a></li> 15 <li><a href="#Contact">Contact</a></li> 16 <li><a href="#Skills">Skills</a></li> 17 <li><a href="https://codesignal.com" target="_blank">Get to know CodeSignal</a></li> 18 </ul> 19 </nav> 20 </header> 21 <main> 22 <section id="Home"> 23 <h2>Home</h2> 24 <p>This is the homepage. Explore to learn more about me.</p> 25 </section> 26 <section id="About"> 27 <h2>About</h2> 28 <p>I'm a budding web developer with a passion for creating interactive user experiences.</p> 29 </section> 30 <section id="Projects"> 31 <h2>Projects</h2> 32 <ul> 33 <li>Project A - A simple static webpage.</li> 34 <li>Project B - A dynamic website using JavaScript and APIs.</li> 35 </ul> 36 </section> 37 <section id="Contact"> 38 <h2>Contact</h2> 39 <p>You can reach me at <a href="mailto:email@example.com">email@example.com</a></p> 40 </section> 41 <section id="Skills"> 42 <h2>Skills</h2> 43 <table border='1'> 44 <thead> 45 <tr> 46 <th>Skill</th> 47 <th>Proficiency</th> 48 </tr> 49 </thead> 50 <tbody> 51 <tr> 52 <td>HTML</td> 53 <td>Intermediate</td> 54 </tr> 55 <tr> 56 <td>CSS</td> 57 <td>Intermediate</td> 58 </tr> 59 <tr> 60 <td>JavaScript</td> 61 <td>Beginner</td> 62 </tr> 63 </tbody> 64 </table> 65 </section> 66 </main> 67 <footer> 68 <p>© 2024 My Website</p> 69 <p><a href="#Home">Back to top</a></p> 70 </footer> 71</body> 72</html>
This snippet adds a new section to your webpage with a table that lists your skills and proficiency levels.
The table header has two columns: Skill and Proficiency. The table body contains rows for each skill, with the skill name in the first column and the proficiency level in the second column. We added three skills to the table: HTML, CSS, and JavaScript, each with a proficiency level.
With this the webpage now has more content and structure, making it more informative and engaging for visitors.
Embedding a skills table in your webpage is important for several reasons:
- Professional Presentation: A well-organized table showcases your skills in a professional manner, which is vital for resumes and portfolios.
- Easy Navigation: Tables help in presenting data concisely, making it easier for visitors to understand your capabilities at a glance.
- Data Organization: Using tables to structure your content can make your webpage more navigable and user-friendly.
Adding a skills table is an excellent way to summarize your strengths and make it easy for others to evaluate your expertise. Whether you're applying for jobs, showcasing your work, or networking, a clear presentation of your skills can make a significant difference.
Excited to get started? Let's move to the practice section, where you'll implement these concepts and enhance your webpage!