W3.CSS Tables

Last Updated : 10 Aug, 2021

W3.CSS provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. W3.CSS also provides classes for making tables responsive.

Simple Table: The .w3-table class is used to create a simple W3.CSS table. This class name is used with <table> tag to create a table.

Syntax:

<table class="w3-table"> Table Contents... <table>

Example:

HTML

<!DOCTYPE html>
<html>
<head>
 
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
       
</head>
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
         of the element to the center. -->
    <div class="w3-container w3-center">
 
        <!-- w3-text-green sets the text 
            color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
           GeeksForGeeks
        </h2>
    </div>
     
    <!-- Adding a table at the center of the page -->
    <div class="w3-container w3-center">
        <table class="w3-table">  
            <!-- Table Heading -->
            <thead>  
                <tr>  
                    <th>Sr. No.</th>  
                    <th>Name</th>  
                    <th>City</th>  
                    <th>Age</th>  
                </tr>  
            </thead>  
               
            <!-- Table Body or Content -->
            <tbody>  
                <tr>  
                    <th>1</th>  
                    <td>Ajay</td>  
                    <td>Patna</td>  
                    <td>20</td>  
                </tr>  
                <tr>  
                    <th>2</th>  
                    <td>Rahul</td>  
                    <td>Chandigarh</td>  
                    <td>17</td>  
                </tr>  
                <tr>  
                    <th>3</th>  
                    <td>Parush</td>  
                    <td>Kolkata</td>  
                    <td>22</td>  
                </tr>  
            </tbody>  
        </table>
    </div>
</body>
</html>

Output:

Stripped rows: The .w3-stripped class is used to create an alternate dark and light rows. Use the combination of table, w3-table, and w3-stripped classes within the <table> tag to create a stripped table.

Syntax:

<table class="w3-table w3-stripped"> Table Contents... <table>

Example:

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Title of the page -->
    <title>GeeksForGeeks</title>
 
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
       
</head>
<body>
    <!-- w3-container is used to add 
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the
         content of the element to the center. -->
    <div class="w3-container w3-center">
 
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
     
    <!-- Adding a table at the center of the page -->
    <div class="w3-container w3-center">
        <table class="w3-table w3-stripped">  
            <!-- Table Headings -->
            <tr>  
                <th>Sr. No.</th>  
                <th>Name</th>  
                <th>City</th>  
                <th>Age</th>  
            </tr>  
 
            <!-- Table Content -->
            <tr>  
                <th>1</th>  
                <td>Ajay</td>  
                <td>Patna</td>  
                <td>20</td>  
            </tr>  
            <tr>  
                <th>2</th>  
                <td>Rahul</td>  
                <td>Chandigarh</td>  
                <td>17</td>  
            </tr>  
            <tr>  
                <th>3</th>  
                <td>Parush</td>  
                <td>Kolkata</td>  
                <td>22</td>  
            </tr>  
        </table>
    </div>
</body>
</html>

Output:

Bordered Table: The .w3-border is used to add a border across the table. The border only occurs around the table and not in the table. The see this effect use .w3-border together with .w3-table in the table tag.

Syntax:

<table class="w3-table w3-border"> Table Contents... <table>

Example:

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Title of the page -->
    <title>GeeksForGeeks</title>
 
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
       
</head>
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the 
         content of the element to the center. -->
    <div class="w3-container w3-center">
 
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
     
    <!-- Adding a table at the center of the page -->
    <div class="w3-container w3-center">
        <table class="w3-table w3-border">  
            <!-- Table Headings -->
            <tr>  
                <th>Sr. No.</th>  
                <th>Name</th>  
                <th>City</th>  
                <th>Age</th>  
            </tr>  
 
            <!-- Table Content -->
            <tr>  
                <th>1</th>  
                <td>Ajay</td>  
                <td>Patna</td>  
                <td>20</td>  
            </tr>  
            <tr>  
                <th>2</th>  
                <td>Rahul</td>  
                <td>Chandigarh</td>  
                <td>17</td>  
            </tr>  
            <tr>  
                <th>3</th>  
                <td>Parush</td>  
                <td>Kolkata</td>  
                <td>22</td>  
            </tr>  
        </table>
    </div>
</body>
</html>

Output:

If we want a completely bordered table we have to use .w3-bordered class along with .w3-border and w3-table inside the table tag.

Example:

HTML

<!DOCTYPE html>
<html>
<head>
 
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
       
</head>
 
<body>
    <!-- w3-container is used to add 
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
         content of the element to the center. -->
    <div class="w3-container w3-center">
 
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            GeeksForGeeks
        </h2>
    </div>
     
    <!-- Adding a table at the center of the page -->
    <div class="w3-container w3-center">
        <table class="w3-table w3-border w3-bordered">  
            <!-- Table Headings -->
            <tr>  
                <th>Sr. No.</th>  
                <th>Name</th>  
                <th>City</th>  
                <th>Age</th>  
            </tr>  
 
            <!-- Table Content -->
            <tr>  
                <th>1</th>  
                <td>Ajay</td>  
                <td>Patna</td>  
                <td>20</td>  
            </tr>  
            <tr>  
                <th>2</th>  
                <td>Rahul</td>  
                <td>Chandigarh</td>  
                <td>17</td>  
            </tr>  
            <tr>  
                <th>3</th>  
                <td>Parush</td>  
                <td>Kolkata</td>  
                <td>22</td>  
            </tr>  
        </table>
    </div>
</body>
</html>

Output:

Hoverable Table: The .w3-hoverable class is used to add a hover effect (change background color to gray when the mouse moves over) on table rows. Use the combination of w3-table and w3-hoverable classes within the <table> tag to create a hover rows table.

Syntax:

<table class="w3-table w3-hoverable"> Table Contents... <table>

Example:

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Title of the page -->
    <title>GeeksForGeeks</title>
 
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
 
<body>
    <!-- w3-container is used to add 
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
         content of the element to the center. -->
    <div class="w3-container w3-center">
 
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
     
    <!-- Adding a table at the center of the page -->
    <div class="w3-container w3-center">
        <table class="w3-table w3-hoverable">  
            <!-- Table Headings -->
            <tr>  
                <th>Sr. No.</th>  
                <th>Name</th>  
                <th>City</th>  
                <th>Age</th>  
            </tr>  
 
            <!-- Table Content -->
            <tr>  
                <th>1</th>  
                <td>Ajay</td>  
                <td>Patna</td>  
                <td>20</td>  
            </tr>  
            <tr>  
                <th>2</th>  
                <td>Rahul</td>  
                <td>Chandigarh</td>  
                <td>17</td>  
            </tr>  
            <tr>  
                <th>3</th>  
                <td>Parush</td>  
                <td>Kolkata</td>  
                <td>22</td>  
            </tr>  
        </table>
    </div>
</body>
</html>

Output:

Centered Content Table: The .w3-centered class is used to place all the content of the table to the center. Use the combination of w3-table and w3-centered classes within the <table> tag to create this effect.

Syntax:

<table class="w3-table w3-centered"> Table Contents... <table>

Example:

HTML

<!DOCTYPE html>
<html>
<head>
 
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
 
<body>
    <!-- w3-container is used to add 
          16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
         content of the element to the center. -->
    <div class="w3-container w3-center">
 
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
     
    <!-- Adding a table at the center of the page -->
    <div class="w3-container w3-center">
        <table class="w3-table w3-centered">  
            <!-- Table Headings -->
            <tr>  
                <th>Sr. No.</th>  
                <th>Name</th>  
                <th>City</th>  
                <th>Age</th>  
            </tr>  
 
            <!-- Table Content -->
            <tr>  
                <th>1</th>  
                <td>Ajay</td>  
                <td>Patna</td>  
                <td>20</td>  
            </tr>  
            <tr>  
                <th>2</th>  
                <td>Rahul</td>  
                <td>Chandigarh</td>  
                <td>17</td>  
            </tr>  
            <tr>  
                <th>3</th>  
                <td>Parush</td>  
                <td>Kolkata</td>  
                <td>22</td>  
            </tr>  
        </table>
    </div>
</body>
</html>

Output:

Now, if you want to select all the above effects all together on a table then you can use w3-table-all class. This class is used to select all the properties of the table i.e border, stripped, table,… You have to use this class with table tag to see the effect.

Example:

HTML

<!DOCTYPE html>
<html>
<head>
 
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
 
<body>
 
    <!-- w3-container is used to add 
          16px padding to any HTML element.  -->
    <!-- w3-center is used to set the
           content of the element to the center. -->
    <div class="w3-container w3-center">
 
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
    </div>
     
    <!-- Adding a table at the center of the page -->
    <div class="w3-container w3-center">
        <table class="w3-table-all">  
            <!-- Table Headings -->
            <tr>  
                <th>Sr. No.</th>  
                <th>Name</th>  
                <th>City</th>  
                <th>Age</th>  
            </tr>  
 
            <!-- Table Content -->
            <tr>  
                <th>1</th>  
                <td>Ajay</td>  
                <td>Patna</td>  
                <td>20</td>  
            </tr>  
            <tr>  
                <th>2</th>  
                <td>Rahul</td>  
                <td>Chandigarh</td>  
                <td>17</td>  
            </tr>  
            <tr>  
                <th>3</th>  
                <td>Parush</td>  
                <td>Kolkata</td>  
                <td>22</td>  
            </tr>  
        </table>
    </div>
</body>
</html>