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>



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