--- title: "How to design HTML Tables" description: "How to design HTML Tables" author: "Harry" published: 2024-06-06 updated: 2024-06-06 canonical: https://www.mindstick.com/forum/160693/how-to-design-html-tables category: "html" tags: ["html", "html5", "html table", "tablets"] reading_time: 4 minutes --- # How to design HTML Tables Embedding [videos seamlessly](https://www.mindstick.com/forum/160692/embedding-videos-seamlessly-in-html) in [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)? ## Replies ### Reply by Ravi Vishwakarma Designing HTML tables involves using the appropriate HTML elements to create the structure of the table and applying CSS to style it. Here’s a comprehensive guide on how to create and design HTML tables: ### Basic Structure of an HTML Table An HTML table is defined using the `` tag. Inside the `
` tag, you use `` (table row) to create rows, `
` (table header) for headers, and `` (table data) for data cells. #### Basic Table Example ```html Basic HTML Table

Sample Table

Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
``` ### Enhancing Table with CSS To make tables more visually appealing, you can use CSS to style the table elements. #### Styled Table Example ```html Styled HTML Table
Sample Styled Table
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3
``` ### Advanced Table Styling with CSS For more advanced styling, you can use CSS to add more sophisticated styles like fixed headers, alternating row colors, and responsive design. #### Advanced Styled Table Example ```html Advanced Styled HTML Table
Advanced Styled Table
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3
``` ### Explanation of Advanced Styling **Table Design**: - `border-collapse: collapse;`: Collapses the borders of the table into a single border. - `margin: 20px 0;`: Adds space above and below the table. - `font-size: 1em;`: Sets a base font size. - `border-radius: 5px 5px 0 0;`: Rounds the top corners of the table. - `box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);`: Adds a shadow around the table. **Header Styling**: - `background-color: #009879;`: Sets a green background color for the header. - `color: #ffffff;`: Sets the text color to white. - `text-align: left;`: Aligns text to the left. **Row Styling**: - **Alternating Colors**: `tbody tr:nth-of-type(even) { background-color: #f3f3f3; }` - **Hover Effect**: `tbody tr:hover { background-color: #f1f1f1; cursor: pointer; }` **Responsive Design**: - The media query (`@media (max-width: 600px)`) makes the table responsive by hiding the header and making each cell act as a block with labels. Designing HTML tables involves structuring the table with HTML and enhancing its appearance and functionality with CSS. By applying these styles, you can create tables that are not only visually appealing but also responsive and user-friendly. --- Original Source: https://www.mindstick.com/forum/160693/how-to-design-html-tables Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.