W3.CSS Tables

W3.CSS provides various numbers of classes for styling table. These are:

w3-table : The w3-table class is used as container for HTML table.

w3-striped : The w3-striped class is used to create striped table.

w3-border : The w3-border class is used to make border around the table.

w3-bordered : The w3-bordered class is used to make bordered lines on the bottom of each row.

w3-centered : The w3-centered class is used to centrally align the contents of the table.

w3-hoverable  : The w3-hoverable class is used to display hoverable table (Background color changes when mouse moved over table).

w3-table-all : The w3-table-all class is used to set all the above properties except w3-centered, w3- hoverable.  


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container">
<h1> List of Products </h1>
<table class="w3-table w3-striped w3-bordered w3-centered w3-hoverable">
<tr class="w3-red"> <th> Product Name</th> <th> Make</th> <th> Cost</th> </tr>
<tr> <td>Mouse</td> <td>Dell </td> <td>300</td> </tr> <tr>
<td>Keyboard</td> <td>HP</td> <td>400</td> </tr> 
<tr> <td>Pen drive</td> <td>Sony</td> <td>800</td> </tr>

Qus. 1 : w3.Table does not provide the following class for tables.

  1. w3-striped
  2. w3-stripe
  3. w3-border
  4. w3-bordered