W3.CSS provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. W3.CSS also provides classes for making tables responsive.
Simple Table: The .w3-table class is used to create a simple W3.CSS table. This class name is used with <table> tag to create a table.
Syntax:
<table class="w3-table"> Table Contents... <table>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">
GeeksForGeeks
</h2>
</div>
<div class="w3-container w3-center">
<table class="w3-table">
<thead>
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th>2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th>3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
Output:
Stripped rows: The .w3-stripped class is used to create an alternate dark and light rows. Use the combination of table, w3-table, and w3-stripped classes within the <table> tag to create a stripped table.
Syntax:
<table class="w3-table w3-stripped"> Table Contents... <table>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksForGeeks</title>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">
GeeksForGeeks
</h2>
</div>
<div class="w3-container w3-center">
<table class="w3-table w3-stripped">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
<tr>
<th>1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th>2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th>3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</table>
</div>
</body>
</html>
|
Output:
Bordered Table: The .w3-border is used to add a border across the table. The border only occurs around the table and not in the table. The see this effect use .w3-border together with .w3-table in the table tag.
Syntax:
<table class="w3-table w3-border"> Table Contents... <table>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksForGeeks</title>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<div class="w3-container w3-center">
<table class="w3-table w3-border">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
<tr>
<th>1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th>2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th>3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</table>
</div>
</body>
</html>
|
Output:
If we want a completely bordered table we have to use .w3-bordered class along with .w3-border and w3-table inside the table tag.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">
GeeksForGeeks
</h2>
</div>
<div class="w3-container w3-center">
<table class="w3-table w3-border w3-bordered">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
<tr>
<th>1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th>2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th>3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</table>
</div>
</body>
</html>
|
Output:
Hoverable Table: The .w3-hoverable class is used to add a hover effect (change background color to gray when the mouse moves over) on table rows. Use the combination of w3-table and w3-hoverable classes within the <table> tag to create a hover rows table.
Syntax:
<table class="w3-table w3-hoverable"> Table Contents... <table>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksForGeeks</title>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<div class="w3-container w3-center">
<table class="w3-table w3-hoverable">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
<tr>
<th>1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th>2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th>3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</table>
</div>
</body>
</html>
|
Output:
Centered Content Table: The .w3-centered class is used to place all the content of the table to the center. Use the combination of w3-table and w3-centered classes within the <table> tag to create this effect.
Syntax:
<table class="w3-table w3-centered"> Table Contents... <table>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<div class="w3-container w3-center">
<table class="w3-table w3-centered">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
<tr>
<th>1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th>2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th>3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</table>
</div>
</body>
</html>
|
Output:
Now, if you want to select all the above effects all together on a table then you can use w3-table-all class. This class is used to select all the properties of the table i.e border, stripped, table,… You have to use this class with table tag to see the effect.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2>
</div>
<div class="w3-container w3-center">
<table class="w3-table-all">
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
<tr>
<th>1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th>2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th>3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</table>
</div>
</body>
</html>
|
Output:
