/    /  Pure CSS – Bordered Tables

Pure CSS – Bordered Tables:

In this tutorial, we will learn about creating Bordered tables in HTML using Pure CSS. Pure CSS provided the class name called “pure-table-bordered” for creating the tables with border.

We need to add this class along with pure-table class in the <table> element. Below is the example for creating a bordered table in Pure CSS.

Example: 

<html> 

<head> 

<title>Pure CSS Bordered Table</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> 

    </head> 

   <body> 

   <table class="pure-table pure-table-bordered">

    <thead>

        <tr>

            <th>Sno</th>

            <th>Student</th>

            <th>Course</th>

            <th>Score</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Steven</td>

            <td>HTML</td>

            <td>70</td>

        </tr>



        <tr>

            <td>2</td>

            <td>Twinkle</td>

            <td>DevOps</td>

            <td>70</td>

        </tr>



        <tr>

            <td>3</td>

            <td>Harry</td>

            <td>DataScience</td>

            <td>65</td>

        </tr>

    </tbody>

</table>

</body> 

</html>

Below is the output: