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>



Programs

CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Website development Company in Allahabad