Challenge - Form and table

Build a registration interface with form and table styles.

Form and table interface

In a registration interface, form and table work side by side. The .field element gets padding, border and border-radius; on :focus the border color is highlighted so the active field is visible. Hint text goes in the placeholder attribute, not the value.

For tables, border-collapse: collapse merges borders; :nth-child(even) adds zebra stripes to even rows; tr:hover highlights the row under the pointer. These five points build a readable registration interface.

Exercise Style the registration interface

Complete the CSS below. Give .field 8px padding and 4px border-radius; on :focus set the border color to #2563eb. For the table, add border-collapse: collapse and set the background of even rows to #f5f5f5.

Show example solution

/* input field */
.field {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.field:focus {
  border-color: #2563eb;
}

/* table */
table {
  border-collapse: collapse;
}

/* even row */
tbody tr:nth-child(even) {
  background: #f5f5f5;
}

Test yourself

Match each form and table feature

:focus

Highlights the active field border
placeholder

Carries the hint text
border-collapse: collapse

Merges table borders
:nth-child(even)

Targets even rows
tr:hover

Highlights the row under pointer

Write the zebra stripe selector

tbody tr:____ {
  background: #f5f5f5;
}

Show answer

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

Where should hint text for an input best be placed?
```
<input type="text" ... />
```
- <input ... value="Enter your name">
- <label>Enter your name</label>
- <input ... title="Enter your name">
- <input ... placeholder="Enter your name">
Show answer

<input ... placeholder="Enter your name"> — Correct. placeholder is the hint text shown when the field is empty and hidden when typing.

Next lesson: Challenge - Intermediate capstone

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies