Responsive HTML Table With Pure CSS - Web Design/UI Design

Summary

In this video, Jeet Saru from Coding Design guides viewers through the process of creating a responsive HTML table using pure CSS, without relying on frameworks like Bootstrap or Tailwind. The tutorial begins by setting up the HTML structure with a main element containing a table header and body. The table is populated with data, including customer images and details. The CSS styling then focuses on making the table visually appealing, with a glassmorphism effect, custom scroll bar, and zebra striping. The table headings are made sticky for easy reference during scrolling, and different status indicators are styled for visual distinction. Responsive design considerations are addressed with media queries to ensure the table remains readable on smaller screens. The video concludes with a call to action, encouraging viewers to like, comment, share, and subscribe for more content.

Takeaways

• 🎨 **Create a Responsive Table**: The video focuses on building a responsive HTML table using pure CSS without relying on frameworks like Bootstrap or Tailwind.
• 🌐 **HTML5 Boilerplate**: Start with an HTML5 boilerplate by using the '!' sign followed by the tab key to generate the basic structure.
• 📝 **Table Structure**: Organize the table with a 'table header' and 'table body' class within a 'main' element for clear separation of headings and data.
• 🖼️ **Image Integration**: Include customer images within the table data and style them to be circular with a fixed size and margin for aesthetic consistency.
• 🔄 **Center Alignment**: Center the table both horizontally and vertically within the viewport using flexbox properties.
• 🎨 **Styling with CSS**: Apply CSS for padding, background color, and other styling elements to enhance the visual appeal of the table.
• 📊 **Zebra Striping**: Use the `nth-child` pseudo-class to create zebra striping for the table rows for better readability.
• 🔗 **Status Indicators**: Utilize different classes for various statuses (e.g., delivered, cancelled, pending, shipped) and style them with distinct background colors and shapes.
• 🔍 **Responsive Design**: Implement media queries to adjust the table's layout and ensure usability on smaller screens.
• 🔁 **Scrollbar Customization**: Customize the scrollbar for the table body section to enhance user interaction, making it visible only on hover.
• 📏 **Sticky Headers**: Use the `position: sticky` property for table headings to keep them visible when scrolling through the table body.
• 📐 **Table Data Spacing**: Ensure there is adequate space between table data cells by setting minimum widths and aligning text to the left for better legibility.

Q & A

What is the main topic of the video?

The main topic of the video is creating a responsive HTML table using pure CSS, without relying on frameworks like Bootstrap or Tailwind.

What is the first step in creating the HTML structure for the table?

The first step is to create an 'index.html' file and use the '!' sign followed by the tab button to generate an HTML5 boilerplate.

What are the two sections created inside the 'main' element with the class name 'table'?

The two sections created are 'table header' and 'table body', which are used to separate the header and the content of the table.

How does the video suggest to align the customer image and the customer name properly?

The video suggests setting the image width and height to 36 pixels, adding a margin-right of 0.5 rem between the image and the customer name, and using border-radius of 50% to make the image circular. It also uses vertical-align to Middle to ensure proper alignment.

What CSS property is used to center the content both horizontally and vertically?

The CSS properties used are 'display: flex', 'justify-content: center' for horizontal centering, and 'align-items: center' for vertical centering.

How does the video create a glassmorphism effect for the table?

The glassmorphism effect is created by setting a background color with a transparent value, using 'background-blur' filter with a blur value of 7 pixels, and adding a box-shadow with a spread value of 0.8 rem.

What is the purpose of using 'position: sticky' for the table headings?

The purpose of using 'position: sticky' for the table headings is to make the headings remain visible at the top when scrolling through the table content.

How does the video create a zebra-striped effect for the table rows?

The zebra-striped effect is created by using the 'nth-child(even)' pseudo-class on the table data (td) elements and applying a background color with a transparent value.

What is the solution provided in the video to handle table content overflowing?

The solution is to set the 'overflow' property to 'hidden' for the table class to prevent the content from overflowing.

How does the video address the issue of table data being squeezed on small screens?

The video uses a media query for screens with a maximum width of 1000 pixels and sets a minimum width for the table data elements, excluding the first data which is the ID, to ensure there is enough space.

What is the final step suggested in the video to ensure a proper gap at the bottom of the table when scrolling horizontally?

The final step is to adjust the 'max-height' property of the 'table body' class by subtracting the total padding value (1.6 rem) from the percentage value (89%) to create a proper gap at the bottom.