Foundation CSS Tables Hover State
Last Updated :
22 Mar, 2022
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications. Foundation CSS Tables are used to arrange the tabular data in the form of rows and columns. We can easily get any table value using the rows and columns. Tables Hover State is used to lightly darken the rows of the table when we hover over the rows. In this article, we will discuss Tables Hover State in Foundation CSS.
Foundation CSS Tables Hover State Class:
- hover: This class is used to darken the rows on hover.
Syntax:
<table class="hover">
</table>
Example 1: The following code demonstrates the Foundation CSS Tables Hover State with some content.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link
rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous"
/>
</head>
<body>
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Foundation CSS Tables Hover State</h3>
<table class="hover">
<thead>
<tr>
<th>GFG 1</th>
<th>GFG 2</th>
<th>GFG 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>Flutter</td>
<td>Javascript</td>
</tr>
<tr>
<td>Data Structure</td>
<td>Coding</td>
<td>GeeksforGeeks</td>
</tr>
<tr>
<td>Python</td>
<td>Web development</td>
<td>GeeksforGeeks.org</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Output:
Example 2: The following code demonstrates the Foundation CSS Tables Hover State with links and content and using width attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link
rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous"
/>
</head>
<body>
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Foundation CSS Tables Hover State</h3>
<table class="hover">
<thead>
<tr>
<th width="300">GFG 1</th>
<th width="100">GFG 2</th>
<th width="150">GFG 3</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">https://www.geeksforgeeks.org/</a></td>
<td>Java</td>
<td>Dart</td>
</tr>
<tr>
<td>Data Structure</td>
<td>Coding</td>
<td>GeeksforGeeks</td>
</tr>
<tr>
<td>Python</td>
<td><a href="#">GeeksforGeeks</a></td>
<td>GeeksforGeeks.org</td>
</tr>
<tr>
<td>Node.js</td>
<td><a href="#">GFG</a></td>
<td>Flutter</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Output:
Reference: https://get.foundation/sites/docs/table.html#hover-state
Similar Reads
Foundation CSS Stacked Table Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
3 min read
Foundation CSS Tables Stripes Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Moz
3 min read
Foundation CSS Tables Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Moz
5 min read
Foundation CSS Tables Sass Reference Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Moz
4 min read
Foundation CSS Kitchen Sink Table Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it really easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on Saas-like boot
4 min read
Foundation CSS Scrolling Table Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
3 min read