Styling Forms and Tables
What Is It?
CSS makes controls and tables easier to scan without changing their HTML meaning. Keep real labels, buttons, table headers, and visible focus.
Properties, Tags and Attributes Explained
font: inherit: Makes form controls use the surrounding font settings.border-collapse: collapse: Merges neighboring table cell borders.th scope="col": An HTML table header associated with its column.label for / input id: HTML attributes connecting a visible label to its control.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Clear form control
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling Forms and Tables</title>
<style>
label { display: block; margin-bottom: 6px; }
input, button { font: inherit; padding: 10px; border: 1px solid #64748b; border-radius: 6px; }
input:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
</style>
</head>
<body>
<label for="name">Your name</label><input id="name" name="name" autocomplete="name" placeholder="e.g. Sam"> <button type="button">Continue</button>
</body>
</html>What you see: The label sits above a padded input with visible keyboard focus. The demo button does not submit data.
Example 2: Readable table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling Forms and Tables</title>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #cbd5e1; text-align: left; padding: 12px; }
thead { background: #dbeafe; }
tbody tr:nth-child(even) { background: #f1f5f9; }
</style>
</head>
<body>
<table><caption>Lesson progress</caption><thead><tr><th scope="col">Topic</th><th scope="col">Status</th></tr></thead><tbody><tr><td>Selectors</td><td>Complete</td></tr><tr><td>Grid</td><td>In progress</td></tr></tbody></table>
</body>
</html>What you see: The header is blue and alternate body rows are shaded.
When and Where to Use It
Use these patterns for registration screens and tabular data. Wrap a wide table in an overflow auto container when needed.
Common Mistake or Useful Tip
A placeholder does not replace a label. Use tables for data relationships, rather than page layout.
Try It Yourself
Add a third table row and observe which rows receive striping.