Open In App
Related Articles

Pure CSS Bordered Table

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
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