Foundation CSS Tables Sass Reference
Last Updated :
23 Jul, 2025
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.
Variable Used:
| Variable-Name | Description | Type | Default-Value |
|---|
| $table-background | This variable is used to define the default color for the table background. | Color | $white
|
| $table-color-scale | This variable is used to define the default scale for darkening the striped table rows and the table border. | Number | 5%
|
| $table-border | This variable is used to define the default style for the table border. | List | 1px solid smart-scale($table-background, $table-color-scale)
|
| $table-padding | This variable is used to define the default padding for table. | Number | rem-calc(8 10 10)
|
| $table-hover-scale | This variable is used to define the default scale for darkening the table rows on hover. | Number | 2%
|
| $table-row-hover | This variable is used to define the default color of standard rows on hover. | List | darken($table-background, $table-hover-scale)
|
| $table-row-stripe-hover | This variable is used to define the default color of striped rows on hover. | List | darken($table-background, $table-color-scale + $table-hover-scale)
|
| $table-is-striped | This variable is used to define the tables that are striped by default and an .unstriped class is created. If false, a .striped class is created. | Boolean | true
|
| $table-striped-background | This variable is used to define the default background color for striped rows. | Color | smart-scale($table-background, $table-color-scale)
|
| $table-stripe | This variable is used to define the default value for showing the stripe on rows of the tables, excluding the header and footer. | Keyword | even |
| $table-head-background | This variable is used to define the default color for the header background. | Color | smart-scale($table-background, $table-color-scale * 0.5)
|
| $table-head-row-hover | This variable is used to define the default color of header rows on hover. | List | darken($table-head-background, $table-hover-scale)
|
| $table-foot-background | This variable is used to define the default color for the footer background. | Color | smart-scale($table-background, $table-color-scale)
|
| $table-foot-row-hover | This variable is used to define the default color of footer rows on hover. | List | darken($table-foot-background, $table-hover-scale)
|
| $table-head-font-color | This variable is used to define the default font color for the header. | Color | $body-font-color
|
| $table-foot-font-color | This variable is used to define the default font color for the footer. | Color | $body-font-color
|
| $show-header-for-stacked | This variable is used to define the default value for showing the header when using stacked tables. | Boolean | false |
| $table-stack-breakpoint | This variable is used to define the breakpoint at which the stacked table switches from mobile to desktop view. | Breakpoint | medium
|
Example 1: In the below code, we will make use of the above variable to demonstrate the use of the table.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
</head>
<body style="margin:20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
</center>
<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>
SASS Code:
$table-background:lightgreen;
tr {
background-color:$table-background ;
}
Compiled CSS Code:
tr {
background-color: lightgreen;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of the table.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
</head>
<body style="margin:20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
</center>
<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>
SASS Code:
$table-head-background:lightgreen;
thead {
background-color:$table-head-background;
}
Compiled CSS Code:
thead {
background-color: lightgreen;
}
Output:
Reference: https://get.foundation/sites/docs/table.html
Similar Reads
Foundation CSS Tabs Sass Reference 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 Menu Sass Reference 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 Card 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 layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. One such useful component which is used in modern websi
2 min read
Foundation CSS Flexbox Utilities Sass Reference Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flexbox Utilities: In Foundation CSS, Flexbox class
3 min read
Foundation CSS Forms Sass Reference 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,
6 min read
Foundation CSS XY Grid Sass Reference Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device. In this article, we will discuss the XY Grid Sass R
3 min read