Pure CSS Tables Complete Reference

Last Updated : 25 Apr, 2022

Pure CSS is a popular framework & an open-source tool, developed by Yahoo, for creating responsive websites & web applications by making use of the responsive CSS modules, that help to develop a better user experience with high efficiency. It can be used as an alternative to Bootstrap.

The Pure CSS Tables provide the different classes to style the HTML Table in various ways. It also facilitates the customizing options to organize the table data by using the various CSS styling properties. The list of complete Table components are given below:

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Import Pure CSS -->
    <link rel="stylesheet"
        href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
        integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
        crossorigin="anonymous"
        origin="anonymous"
    /> 
  
    <!-- Used to optimized Website for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  
    <style> 
    .container { 
        margin-top: 20px; 
        display: flex; 
        align-items: center; 
  
        justify-content: center; 
        flex-direction: column; 
    } 
    h1 { 
        color: green; 
    } 
    </style> 
</head> 
<body> 
    <div class="container"> 
    <h1>GeeksforGeeks</h1> 
    <h2>Bordered Table</h2> 
    <!-- Here pure-table and pure-table-bordered class is used -->
  
    <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> 
    </div> 
</body> 
</html> 