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.