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, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Tables are an easy way to organize a lot of data. A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. Tables are useful for various tasks such as presenting text information and numerical data. It can be used to compare two or more items in the tabular form layout. Tables are used to create databases. An HTML table and a Semantic UI table both are the same structurally.
Foundation CSS Tables:
- Basics: This is the normal Foundation CSS table.
- Hover State: This is used to lightly darken the table rows on hover.
- Stripes: This means that the rows in the table have alternate white and grey background colors which appear like stripes.
- Stacked Table: This is a table layout that stacks its cells on top of each other on small screens to make the layout responsive.
- Scrolling Table: This enables horizontal scrolling in our table.
Syntax:
<table class="CSS-Tables-class">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: This is a basic example illustrating Table Basics created using Foundation CSS.
<!DOCTYPE html><html>
<head>
<title>Foundation CSS Tables</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color:green;">GeeksforGeeks</h2>
<h3>Foundation CSS Tables</h3>
</center>
<b>Table Basics</b>
<table>
<thead>
<tr>
<th>Data Structures</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
</tr>
<tr>
<td>LinkedList</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
</tr>
<tr>
<td>AVL Tree</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
</tr>
<tr>
<td>HashMap</td>
<td>N/A</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(1)</td>
</tr>
<tr>
<td>AVL Tree</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Example 2: This is a basic example illustrating a Hover State table created using Foundation CSS.
<!DOCTYPE html><html>
<head>
<title>Foundation CSS Tables</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Foundation CSS Tables</h3>
</center>
<b>Table Hover State</b>
<table class="hover">
<thead>
<tr>
<th>Data Structures</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
</tr>
<tr>
<td>LinkedList</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
</tr>
<tr>
<td>AVL Tree</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
</tr>
<tr>
<td>HashMap</td>
<td>N/A</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(1)</td>
</tr>
<tr>
<td>AVL Tree</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Example 3: This is a basic example illustrating Table Stripes created using Foundation CSS.
<!DOCTYPE html><html>
<head>
<title>Foundation CSS Tables</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color:green;">GeeksforGeeks</h2>
<h3>Foundation CSS Tables</h3>
</center>
<b>Table with Stripes</b>
<table>
<thead>
<tr>
<th>Data Structures</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
</tr>
<tr>
<td>LinkedList</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
</tr>
<tr>
<td>AVL Tree</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
</tr>
</tbody>
</table>
<b>Table without Stripes</b>
<table class="unstriped">
<thead>
<tr>
<th>Data Structures</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
</tr>
<tr>
<td>LinkedList</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
</tr>
<tr>
<td>AVL Tree</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Example 4: This is a basic example illustrating a Stacked Table on a small size device created using Foundation CSS.
<!DOCTYPE html><html>
<head>
<title>Foundation CSS Tables</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Foundation CSS Tables</h3>
</center>
<b>Stacked Table</b>
<table class="stack">
<thead>
<tr>
<th>Data Structures</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
</tr>
<tr>
<td>LinkedList</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Example 5: This is a basic example illustrating a Scrolling Table created using Foundation CSS.
<!DOCTYPE html><html>
<head>
<title>Foundation CSS Tables</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Foundation CSS Tables </h3>
</center>
<b>Scrolling Table</b>
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Data Structures</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
<th>Access</th>
<th>Insertion</th>
<th>Deletion</th>
<th>Search</th>
</tr>
</thead>
<tbody>
<tr>
<td>Array</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(n)</td>
</tr>
<tr>
<td>LinkedList</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
<td>O(n)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(n)</td>
</tr>
<tr>
<td>AVL Tree</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
<td>O(log n)</td>
</tr>
<tr>
<td>HashMap</td>
<td>N/A</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>N/A</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>N/A</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>N/A</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(1)</td>
<td>N/A</td>
<td>O(1)</td>
<td>O(1)</td>
<td>O(1)</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/table.html