Foundation CSS Kitchen Sink Table
Last Updated :
10 Mar, 2022
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 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. 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.
The Kitchen Sink has the Foundation elements to work well in our websites and applications. The Table component allows you to aggregate a huge amount of data and present it in a clear and orderly way. It can be easily implemented by using the <table> tag.
Foundation CSS Kitchen Sink Table Classes:
- hover: This class is used to slightly darken the table rows on hover.
- unstriped: This class is used to make an unstriped table, as, by default table rows are striped.
- stack: This class is used to stack a table on small screens and now the table gets stacked into small sections.
- table-scroll: This class allows you to enable horizontal scrolling in your table so that you can show more tabular data
Syntax:
<table>
<thead>... </thead>
<tbody> ... </tbody>
</table>
Example: The following code demonstrates the Kitchen sink Table component used with hover class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Kitchen Sink Table</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Table</h3>
<br />
<table class="hover">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 00</td>
<td>Cell 01</td>
<td>Cell 02</td>
</tr>
<tr>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
<tr>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
</tr>
</tbody>
</table>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Table
Example: The following code demonstrates the Kitchen sink Table component used with unstriped class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Kitchen Sink Table</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Table</h3>
<br />
<table class="unstriped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 00</td>
<td>Cell 01</td>
<td>Cell 02</td>
</tr>
<tr>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
<tr>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
</tr>
</tbody>
</table>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Table
Example: The following code demonstrates the Kitchen sink Table component used with stack class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Kitchen Sink Table</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Table</h3>
<br />
<table class="stack">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 00</td>
<td>Cell 01</td>
<td>Cell 02</td>
</tr>
<tr>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
<tr>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
</tr>
</tbody>
</table>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Table
Example: The following code demonstrates the Kitchen sink Table component used with table-scroll class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Kitchen Sink Table</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Table</h3>
<br />
<table class="table-scroll">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 00</td>
<td>Cell 01</td>
<td>Cell 02</td>
<td>Cell 03</td>
<td>Cell 04</td>
<td>Cell 05</td>
<td>Cell 06</td>
<td>Cell 07</td>
<td>Cell 08</td>
</tr>
<tr>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
<td>Cell 13</td>
<td>Cell 14</td>
<td>Cell 15</td>
<td>Cell 16</td>
<td>Cell 17</td>
<td>Cell 18</td>
</tr>
<tr>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
<td>Cell 23</td>
<td>Cell 24</td>
<td>Cell 25</td>
<td>Cell 26</td>
<td>Cell 27</td>
<td>Cell 28</td>
</tr>
</tbody>
</table>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Table
Reference: https://get.foundation/sites/docs/kitchen-sink.html#table
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...