Pure CSS Table with Horizontal Borders

Last Updated : 30 Jan, 2022

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 emphasizes the header.

A table with Horizontal Borders is a table that has only a horizontal border. To make the horizontal bordered table, we will add the "pure-table-horizontal" class.

Pure CSS Table with Horizontal Borders Class:

pure-table-horizontal: This class is used to create the horizontal bordered table. This class is used with a pure-table class.

Syntax:

<table class="pure-table pure-table-horizontal">
    <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 Table with Horizontal Borders</h3>

        <table class="pure-table pure-table-horizontal">
            <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 Stripped Table

ppatelkap

Improve

Article Tags :

Pure CSS Table with Horizontal Borders

Similar Reads

Pure CSS Base

Pure CSS Buttons

Pure CSS Tables

Pure CSS Forms

Pure CSS Grids

Pure CSS Menus

Thank You!

What kind of Experience do you want to share?