Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
Primer CSS Tables are used to create the HTML Table using the <thead>, <tfoot>, <tbody>, and <th> tags. The <tfoot> tag is generally placed above the <tbody> tag when we want to load the footer first. In this article, we will discuss Primer CSS Tables.
Primer CSS Tables Tags:
- <table>: This tag is used to create the table.
- <thead>: This tag is used to create the table header.
- <tfoot>: This tag is used to create the table footer.
- <tr>: This tag is used to create the table row.
- <tbody>: This tag is used to create the table body.
Syntax:
<table>
<thead>
<tr>
..
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
<tfoot>
<tr>
...
</tr>
</tfoot>
</table>
Example 1: The following example demonstrates the Primer CSS Tables.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Tables </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body class="m-2">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Tables </h3> <br>
<table>
<thead>
<tr>
<th scope="col"> Header 1 </th>
<th scope="col"> Header 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td> John </td>
<td> 90 </td>
</tr>
<tr>
<td> Jack </td>
<td> 75 </td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Primer CSS Tables
Example 2: The following example demonstrates the Primer CSS Tables.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Tables </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body class="m-2">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Tables </h3> <br>
<table>
<thead>
<tr>
<th scope="col"> Header 1 </th>
<th scope="col"> Header 2 </th>
<th scope="col"> Header 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td> <a href=""> Java </a> </td>
<td class="color-bg-danger"> Python </td>
<td> <a href=""> C++ </a> </td>
</tr>
<tr>
<td class="color-bg-success"> App dev </td>
<td> <a href=""> Web dev </a> </td>
<td> <a href=""> Flutter </a> </td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Primer CSS Tables
Reference: https://primer.style/css/principles/html#tables
Similar Reads
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
CSS Tables CSS tables are used to style HTML tables, making them look neat and organized for clear data presentation.Add borders, spacing, and colors to enhance table design.Create responsive tables that adjust for all screen sizes.HTML<html> <head> <style> table { width: 50%; border-collapse
5 min read
Materialize CSS | Tables Tables are nice and easy way to organize a lot of data. Materialize CSS provides a few utility classes to style table. In addition to improve mobile experience, all tables on mobile-screen widths are centered automatically. Following are the styles for table: Stripped Table: html <!DOCTYPE html
3 min read
Pure CSS Stripped Table 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. In Pure CSS, we will add a "pure-table" class to add styles to the table. This class adds padding and borders to table elements and em
2 min read
Primer CSS Display Table Grids Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system. Primer CSS Display Table Grids are used to create th
3 min read