Foundation CSS Tables Basics
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 the arrangement of tabular data in the form of rows and columns. We can easily get any table value using the rows and columns. We can have any type of data in the table such as text, link, image, etc. In this article, we will discuss Tables Basics in Foundation CSS.
Foundation CSS Tables Basics Tags:
- table: It is used to create the table.
- thead: It is used to group header content.
- tbody: It is used to create the body content.
Syntax:
<table>
<thead>
....
</thead>
<tbody>
....
</tbody>
</table>
Example 1: The following code demonstrates the Foundation CSS Tables Basics.
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 Basics</h3>
<table>
<thead>
<tr>
<th>GFG Heading 1</th>
<th>GFG Heading 2</th>
<th>GFG Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>A Computer Science</td>
<td>programming articles</td>
<td>Java</td>
</tr>
<tr>
<td>Portal for geeks</td>
<td>Coding</td>
<td>computer science</td>
</tr>
<tr>
<td>Javascript</td>
<td>Web development</td>
<td>App development</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Output:
Example 2: The following code demonstrates the Foundation CSS Tables Basics using the 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 Basics</h3>
<table>
<thead>
<tr>
<th width="300">GFG Heading 1</th>
<th width="200">GFG Heading 2</th>
<th width="20">GFG Heading 3</th>
<th width="100">GFG Heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>A Computer Science portal for geeks. GeeksforGeeks</td>
<td>programming articles portal for geeks</td>
<td>Java</td>
<td>Flutter</td>
</tr>
<tr>
<td>Portal for geeks</td>
<td>Coding</td>
<td>computer science</td>
<td>GeeksforGeeks</td>
</tr>
<tr>
<td>programming articles portal for geeks</td>
<td>Web development</td>
<td>App development</td>
<td>Coding</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
Output:
Reference: https://get.foundation/sites/docs/table.html#basics
Similar Reads
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
Database Design Fundamentals Database design is important for managing and organizing data effectively. It ensures data is stored efficiently, retrieved quickly, and maintained consistently. A well-designed database significantly enhances the performance and usability of applications. In this article we will explore the basics
5 min read
Pure CSS Tables Introduction: Before starting with Pure we must know the basics of plain CSS. Basically, Pure CSS is a Cascading Style Sheet framework developed by YAHOO. The main reason for developing Pure CSS is used to develop responsive and reactive websites like Bootstrap which is also compatible with mobile d
5 min read
Access Types in DBMS Access is a database management system that is a part of the Microsoft 365 suite and a database in Access is comprised of four objects: table, query, form, and report. In this article, we will discuss all these objects in brief and will understand what is the contribution of each object type in a re
3 min read