<html> HTML
<!-- TODO: Create an accessible employee table with <caption>, <thead>, <tbody>, and proper headers. -->
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <title>Tables and Accessibility</title>
  </head>
  <body>
    <h1>Employee Directory</h1>
    <p style='color:#666'>Below, build a semantic table with three employees and columns for name, role, and email.</p>

    <table>
      <!-- Add a <caption> describing the table -->
      <!-- Add a <thead> with three <th> elements (Name, Role, Email) using scope='col' -->
      <!-- Add a <tbody> with three employee rows -->
    </table>
  </body>
</html>
# CSS
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
caption {
  caption-side: top;
  font-weight: 600;
  text-align: left;
  margin-bottom: 0.5rem;
}
th, td {
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  text-align: left;
}
th {
  background-color: #f5f5f5;
}
Live preview updates as you type
Building preview…