Day 41/180 of Frontend Dev: Styling Forms and Tables

#webdev #frontend #frontendchallenge

Challenge Title: Mastering the Look of Forms and Tables with CSS

Welcome to Day 41 of our 180 Frontend Challenge. Yesterday, we styled a personal website. Today, we will focus on two essential UI elements you’ll use in almost every web project—forms and tables.

The goal is not only to make them functional but also visually appealing, accessible, and easy to interact with.

🔹 Why Style Forms and Tables?

Forms help users interact with your website, from logging in to sending messages. A poorly styled form can frustrate users.
Tables are crucial for displaying structured data, but without styling, they can be hard to read.

🔹 Folder Structure

Keep your files organized:

forms-tables/
│
├── index.html
├── style.css

🔹 Step 1: HTML Structure

We’ll create a simple form and a table for demonstration.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Forms and Tables</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <section class="form-section">
    <h1>Contact Form</h1>
    <form>
      <label for="name">Full Name</label>
      <input type="text" id="name" placeholder="Enter your name" required />

      <label for="email">Email Address</label>
      <input type="email" id="email" placeholder="Enter your email" required />

      <label for="message">Message</label>
      <textarea id="message" placeholder="Write your message" rows="4"></textarea>

      <button type="submit">Submit</button>
    </form>
  </section>

  <section class="table-section">
    <h1>Project Data</h1>
    <table>
      <thead>
        <tr>
          <th>Project Name</th>
          <th>Status</th>
          <th>Completion</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Portfolio Website</td>
          <td>Completed</td>
          <td>100%</td>
        </tr>
        <tr>
          <td>Todo App</td>
          <td>In Progress</td>
          <td>70%</td>
        </tr>
        <tr>
          <td>Blog Platform</td>
          <td>Not Started</td>
          <td>0%</td>
        </tr>
      </tbody>
    </table>
  </section>
</body>
</html>

🔹 Step 2: CSS Styling

We will style forms and tables so they look clean, modern, and user-friendly.

/* style.css */

body {
  font-family: system-ui, sans-serif;
  background: #f8f9fa;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

h1 {
  margin-bottom: 1rem;
  color: #222;
}

section {
  margin-bottom: 3rem;
}

/* ===== FORM STYLING ===== */
form {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  max-width: 400px;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

input, textarea {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 1rem;
}

input:focus, textarea:focus {
  border-color: #007bff;
  outline: none;
}

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

/* ===== TABLE STYLING ===== */
table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

thead {
  background: #007bff;
  color: white;
}

th, td {
  padding: 1rem;
  text-align: left;
}

tbody tr:nth-child(even) {
  background: #f2f2f2;
}

tbody tr:hover {
  background: #e6f0ff;
}

🔹 Step 3: Responsive Adjustments

Forms and tables should adapt to smaller screens.

@media (max-width: 768px) {
  form {
    width: 100%;
  }

  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 1rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;
  }

  td {
    padding-left: 50%;
    position: relative;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    font-weight: bold;
  }
}

🔹 What You’ve Practiced

Creating clean, accessible forms
Styling input fields, labels, and buttons
Using hover and focus states for better UX
Making tables visually appealing and readable
Adding responsive design for mobile users

🔹 Pro Tips

Use enough padding for click-friendly buttons
Keep form labels visible for accessibility
Use alternating row colors for better table readability
Always design mobile-first, especially for tables

🔹 Boost Your Frontend Skills Further

If you want to master forms, tables, and full UI design systems, my Frontend Mastery eBook will walk you through real-world styling challenges with complete solutions.

Inside, you’ll find: