Blog

October 17, 2024

1. HTML (table.html)

Stylish Table using HTML and CSS

Student Grades

2. CSS (style.css) * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; font-family: Arial, sans-serif; } .table-container { width: 90%; max-width: 800px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; margin-bottom: 20px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; border: 1px solid #ddd; } th { background-color: #4CAF50; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } Explanation: HTML: A. Table Structure: 1. The table is wrapped in a div with the class table-container. 2. It includes a heading (

) and a element. 3. The table has a header section () and a body section (). 4. Each row of the table consists of elements, containing header cells (