W3CSS Tables Advanced

In the previous article, we started our discussion on W3CSS tables. We saw how to create a basic table, how to create a stripped table and how to add border to a table. In this article we shall study some W3CSS tables advanced classes. We shall start with w3-table-all class which adds combined affect of w3-table, w3-striped, w3-border and w3-bordered class. Next we shall see how to center table data. Finally we shall see how to create hoverable tables.

Adding All Table Affects

To create a table having strips, border around the strips and borders around the whole table, create a table and add w3-table-all class to the opening table tag. It will add all the affects combined to the table. Take a look at the following example:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <table class="w3-table-all">
        <tr>
          <th>Player</th>
          <th>Matches</th>
          <th>Goals</th>
        </tr>
        <tr>
          <td>John</td>
          <td>50</td>
          <td>13</td>
        </tr>
        <tr>
          <td>Mark</td>
          <td>34</td>
          <td>22</td>
        </tr>
        <tr>
          <td>Will</td>
          <td>54</td>
          <td>43</td>
        </tr>
    </table>

</body>
    
</html>

Download the code Try the code

In the above code we use w3-table-all class to add all the basics table properties i.e,table striped, table borde

Centered Tables

Centered tables contain all the data centered horizontally inside the table cells. It is extremely simple to create centered table. Simply add “w3-centered” table class. Take a look at the following code to see how W3CSS tables are centered

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <table class="w3-table-all w3-centered">
        <tr>
          <th>Player</th>
          <th>Matches</th>
          <th>Goals</th>
        </tr>
        <tr>
          <td>John</td>
          <td>50</td>
          <td>13</td>
        </tr>
        <tr>
          <td>Mark</td>
          <td>34</td>
          <td>22</td>
        </tr>
        <tr>
          <td>Will</td>
          <td>54</td>
          <td>43</td>
        </tr>
    </table>

</body>
    
</html>

Download the code Try the code

Hoeverable Tables

To enhance visual aesthetics of an table, use w3-hoverable class. This class adds an affect to the table which changes the table row color upon mouse hover. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <table class="w3-table-all w3-hoverable">
        <tr>
          <th>Player</th>
          <th>Matches</th>
          <th>Goals</th>
        </tr>
        <tr>
          <td>John</td>
          <td>50</td>
          <td>13</td>
        </tr>
        <tr>
          <td>Mark</td>
          <td>34</td>
          <td>22</td>
        </tr>
        <tr>
          <td>Will</td>
          <td>54</td>
          <td>43</td>
        </tr>
    </table>

</body>
    
</html>

Download the code Try the code

Apart from hovering all the rows of the table, you can choose specific rows and add different hover color to that row. To do so, you have to add w3-hover-color class to the row of the table to which you want to add a different hover color. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <table class="w3-table-all ">
        <tr>
          <th>Player</th>
          <th>Matches</th>
          <th>Goals</th>
        </tr>
        <tr class="w3-hover-yellow">
          <td>John</td>
          <td>50</td>
          <td>13</td>
        </tr>
        <tr>
          <td>Mark</td>
          <td>34</td>
          <td>22</td>
        </tr>
        <tr>
          <td>Will</td>
          <td>54</td>
          <td>43</td>
        </tr>
    </table>

</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .