Creating Stylish HTML Tables with Hover Effects Using CSS and JavaScript

Tables are a fundamental part of web development, often used to display data in a structured and organized manner. However, tables can sometimes appear dull and lackluster. In this article, we'll explore how to enhance your HTML tables with stylish hover effects using CSS and JavaScript. The end result will be visually appealing tables that engage users and make data presentation more interactive.

Prerequisites

Before we dive into the implementation, make sure you have a basic understanding of HTML, CSS, and JavaScript. This article assumes you're familiar with these technologies.

Building the HTML Structure

Let's start by setting up the HTML structure for our table. We'll create a simple table with three columns: Name, Description, and Year. Here's the basic HTML code:

<!-- HTML -->
<table border="0" class="table" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table rows with data -->
  </tbody>
</table>

Styling the Table with CSS

Now, let's style the table using CSS to achieve the desired appearance. We'll apply a border, set font sizes, and align content. Here's the CSS code:

body {
  margin: 20px;
  margin-top:100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table {
  width: 700px;
  border: 1px solid black;
}
.table th {
  text-transform: uppercase;
  font-size: 10px;
}
.table tr th:last-child,
.table tr td:last-child{
  text-align:center;
}
.table th,
.table td {
  padding: 10px;
  text-align: left;
  padding: 15px;
  border-bottom: 1px solid black;
}
.table tr:last-child td {
  border-bottom: 0px solid black;
}
.effect {
  display: inline-block;
  transition: all 250ms ease;
  position: relative;
  padding: 5px;
  transition: all 0.3s ease;
}
.effect:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: black;
  border-radius: 5px;
  z-index: -1;
  transition: all 0.3s ease;
}
.table tr:hover .effect:before {
  width: 100%;
}
.table tr:not(:hover) .effect:before {
  right: 0;
  left: initial;
  opacity: 0.7;
}
.table tr:hover .effect {
  color: white;
}

Implementing the JavaScript

To achieve the hover effect, we'll use JavaScript to wrap the content of each table cell in a div element with the class "effect". This allows us to manipulate the styles of these elements when the user hovers over a row and keep the HTML clean. Here's the JavaScript code:

// JavaScript
// Get all the table elements with the class ".table"
const tables = document.querySelectorAll('.table');

// Loop through each table
tables.forEach(table => {
  // Get all the td elements within the current table
  const tds = table.querySelectorAll('td');

  // Loop through each td element
  tds.forEach(td => {
    // Create a new div element with the class "effect"
    const tdText = document.createElement('div');
    tdText.classList.add('effect');

    // Move the content of the td element into the div element
    while (td.firstChild) {
      tdText.appendChild(td.firstChild);
    }
    // Append the div element back into the td element
    td.appendChild(tdText);
  });
});

By combining HTML, CSS, and JavaScript, we've successfully created visually appealing tables with hover effects. The hover effect engages users and adds interactivity to an otherwise static table, making data presentation more enjoyable and user-friendly. You can further customize the styles and animations to match your website's design theme. Feel free to experiment and enhance these techniques to create even more dynamic table designs.

Here is the codepen