Table with Avatars Template
Add a personal touch to your lists and directories by including user avatars or profile pictures.
This simple but effective design pairs a user's image with their name and other details, making your tables more human and engaging.
About this Table with Avatars
Putting a face to a name is a powerful way to make data feel more personal. This template provides a clean and modern layout for any list that involves people. It uses a circular avatar, a common convention in modern UI design, and places it neatly next to the user's name and email or role. CSS Flexbox is used within the table cell to ensure the image and text are always perfectly vertically aligned, creating a polished and professional look regardless of content length.
Key Features:
- Circular Avatars: Uses
border-radius: 50%on images to create a clean, modern avatar style. - Perfect Vertical Alignment: Leverages Flexbox for robust alignment of images and text.
- Engaging & Personal: Adding images makes the list feel more like a directory of people rather than just abstract data.
- Spacious & Clean Layout: A minimalist design with generous padding ensures the focus remains on the people in the list.
Ideal Use Cases:
- "Meet Our Team" pages.
- User lists in the backend of a web application.
- Contact lists in a CRM.
- Leaderboards or testimonial lists.
Dependencies:
None. This template uses only pure HTML and CSS. The images are placeholders that you would replace with your own.
Code
Here's the full code for the table with avatars: