/    /  Pure CSS – Pure Tables

Pure CSS – Pure Tables:

In this tutorial, we will learn about creating tables in HTML using Pure CSS. Pure CSS provided the class name called “pure-table” to design a HTML table.

This particular class will take care about the padding and borders to the rows and columns of the table and highlight the header too. Below is the example for creating a default table in Pure CSS.

Example:

<html> 

<head> 

<title>Pure CSS Default 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">

    <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: