Pure CSS Bordered Table

Last Updated : 30 Jan, 2022

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=
"https://unpkg.com/[email protected]/build/pure-min.css"
        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>