accessibility
Accessibility Considerations
check_circle
Use <th> for headers instead of styled <td>
check_circle
Add scope attribute to headers (scope="col" or scope="row")
check_circle
Provide captions with <caption> element
check_circle
Use summary attribute for complex tables
style
Styling with CSS
check_circle
Use border-collapse for cleaner borders
check_circle
Apply zebra striping for readability
check_circle
Add hover effects for better UX
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 12px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 12px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
Before Styling
| Name | Age | Country |
|---|---|---|
| John | 25 | USA |
| Maria | 30 | Spain |
| Li | 28 | China |
After Styling
| Name | Age | Country |
|---|---|---|
| John | 25 | USA |
| Maria | 30 | Spain |
| Li | 28 | China |
