Module 7: Links and Tables Styling
Master the art of styling interactive links and creating beautiful tables
Learning Outcomes
- Understand different link states and how to style each
- Master table styling and internal elements
- Learn techniques for responsive tables
- Apply advanced styling to tables using CSS
- Accessibility standards for links and tables
Styling Links
HTML links have four distinct states that can be independently styled with CSS. This allows for enhanced user experience by changing appearance based on interaction.
Link States
/* Unvisited links */
a:link {
color: var(--burgundy-main);
text-decoration: none;
}
/* Visited links */
a:visited {
color: #7c3aed;
}
/* Hover state */
a:hover {
color: var(--burgundy-dark);
text-decoration: underline;
}
/* Active/clicked links */
a:active {
color: #dc2626;
}Link Styling Best Practices
- Always provide visual feedback on hover (change color or underline)
- Differentiate visited links with a distinct color
- Ensure sufficient color contrast for accessibility
- Use transitions for smooth state changes
- Maintain consistent link styling throughout your site
Styling Tables
Tables should be both functional and visually appealing. Proper styling enhances readability and user experience.
Basic Table Styling
| Product | Category | Price | Stock |
|---|---|---|---|
| Premium Laptop | Electronics | $1,199 | 15 |
| Wireless Headphones | Audio | $249 | 32 |
| Smart Watch | Wearables | $399 | 8 |
| Bluetooth Speaker | Audio | $129 | 21 |
/* Basic Table Styling */
.styled-table {
width: 100%;
border-collapse: collapse;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
.styled-table th {
background-color: var(--burgundy-main);
color: white;
}
.styled-table tr:nth-child(even) {
background-color: #fdf5f5;
}
.styled-table tr:hover {
background-color: #fce9e9;
}Responsive Table Techniques
Horizontal Scrolling
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}Wraps the table in a scrollable container for small screens.
Stacked Layout
@media (max-width: 600px) {
.responsive-table td {
display: block;
text-align: right;
}
.responsive-table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}Converts table rows to stacked cards on mobile devices.
Interactive Playground
Experiment with link and table styling in this live code editor:
Code Editor
Live Preview