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.
Example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<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>
</table>
</div>
</body>
</html>
Qus. 1 : Which W3.CSS class class is used to add zebra-stripes to a table
- w3-table-striped
- w3-zebra
- w3-striped
- w3-zebra-striped
- w3-striped
- w3-border
- w3-centered
- w3-table
- w3-striped
- w3-stripe
- w3-border
- w3-bordered