Open In App

Pure CSS Bordered Table

Improve
Improve
Like Article
Like
Save
Share
Report

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 “pure-table” class to add styles on table. This class adds the padding and borders to table elements, and emphasizes the header.

Bordered Table is a table that has horizontal and vertical border to the cell. To make the bordered table, we will add “pure-table-bordered” class.

Pure CSS Bordered Table Class:

  • pure-table-bordered: This class is used to created the bordered table. This class is used with pure-table class.

Syntax:

<table class="pure-table pure-table-bordered">
    <thead>
        // Table heading content
    </thead>
    <tbody>
        // Table body content
    </tbody>
</table>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
        integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
        crossorigin="anonymous">
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>Pure CSS Bordered Table</h3>
  
        <table class="pure-table pure-table-bordered">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Name</th>
                    <th>Runs</th>
                    <th>Centuries</th>
                    <th>Strike Rate</th>
                    <th>Avg</th>
                </tr>
            </thead>
  
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Rohit</td>
                    <td>10000</td>
                    <td>29</td>
                    <td>97</td>
                    <td>55</td>
                </tr>
  
                <tr>
                    <td>2</td>
                    <td>Virat</td>
                    <td>12000</td>
                    <td>40</td>
                    <td>91</td>
                    <td>49</td>
                </tr>
  
                <tr>
                    <td>3</td>
                    <td>Rahul</td>
                    <td>5000</td>
                    <td>8</td>
                    <td>85</td>
                    <td>45</td>
                </tr>
  
                <tr>
                    <td>4</td>
                    <td>Rishabh</td>
                    <td>4000</td>
                    <td>2</td>
                    <td>89</td>
                    <td>39</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
  
</html>


Output:

Pure CSS Bordered Table

Pure CSS Bordered Table

Reference: https://purecss.io/tables/#bordered-table



Last Updated : 30 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads