Table of Contents
W3.CSS Tables
- The w3-table classes is used to display a basic table.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://nielitbhu.com/w3file.css">
<body>
<div class="w3-container">
<h2>Basic Table using W3.CSS</h2>
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Moblie</th>
</tr>
<tr>
<td>Ravi Kumar</td>
<td>Yadav</td>
<td>9885847450</td>
</tr>
<tr>
<td>Sunil Kumar</td>
<td>Jain</td>
<td>9415336652</td>
</tr>
<tr>
<td>Ravi Kishan</td>
<td>Singh</td>
<td>6365241484</td>
</tr>
</table>
</div>
</body>
</html>
W3.CSS Tables
- The w3-table classes is used to display a basic table.
- The w3-striped classes is used to add zebra stripes to any table.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://nielitbhu.com/w3file.css">
<body>
<div class="w3-container">
<h2>This is W3.CSS Striped Table</h2>
<p>The w3-striped class adds zebra-stripes to a table</p>
<table class="w3-table w3-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Moblie</th>
</tr>
<tr>
<td>Ravi Kumar</td>
<td>Yadav</td>
<td>9885847450</td>
</tr>
<tr>
<td>Sunil Kumar</td>
<td>Jain</td>
<td>9415336652</td>
</tr>
<tr>
<td>Ravi Kishan</td>
<td>Singh</td>
<td>6365241484</td>
</tr>
</table>
</div>
</body>
</html>
W3.CSS Tables
- The w3-table classes is used to display a basic table.
- The w3-bordered classes adds a bottom border to each table row.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://nielitbhu.com/w3file.css">
<body>
<div class="w3-container">
<h2>This is W3.CSS Bordered Table</h2>
<p>The w3-bordered class adds a bottom border to each table row</p>
<table class="w3-table w3-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Moblie</th>
</tr>
<tr>
<td>Ravi Kumar</td>
<td>Yadav</td>
<td>9885847450</td>
</tr>
<tr>
<td>Sunil Kumar</td>
<td>Jain</td>
<td>9415336652</td>
</tr>
<tr>
<td>Ravi Kishan</td>
<td>Singh</td>
<td>6365241484</td>
</tr>
</table>
</div>
</body>
</html>
W3.CSS Tables
- The w3-table classes is used to display a basic table.
- The w3-striped classes is used to add zebra stripes to any table.
- The w3-border classes is used to display a border around a table.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://nielitbhu.com/w3file.css">
<body>
<div class="w3-container">
<h2>This is W3.CSS Border Around Table</h2>
<p>The w3-border class adds a border around the table.</p>
<table class="w3-table w3-striped w3-border">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Moblie</th>
</tr>
<tr>
<td>Ravi Kumar</td>
<td>Yadav</td>
<td>9885847450</td>
</tr>
<tr>
<td>Sunil Kumar</td>
<td>Jain</td>
<td>9415336652</td>
</tr>
<tr>
<td>Ravi Kishan</td>
<td>Singh</td>
<td>6365241484</td>
</tr>
</table>
</div>
</body>
</html>
W3.CSS Tables
- The w3-table-all classes combines all of the table classes.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://nielitbhu.com/w3file.css">
<body>
<div class="w3-container">
<h2>Table All</h2>
<p> The combines the w3-table, w3-bordered, w3-striped, and
w3-border classes is known as w3-table-all class</p>
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Moblie</th>
</tr>
<tr>
<td>Ravi Kumar</td>
<td>Yadav</td>
<td>9885847450</td>
</tr>
<tr>
<td>Sunil Kumar</td>
<td>Jain</td>
<td>9415336652</td>
</tr>
<tr>
<td>Ravi Kishan</td>
<td>Singh</td>
<td>6365241484</td>
</tr>
</table>
</div>
</body>
</html>
W3.CSS Tables
- The w3-table-all classes combines all of the table classes.
- The w3-centered classes is used for centers the content of the table.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://nielitbhu.com/w3file.css">
<body>
<div class="w3-container">
<h2>Centering Content in Table</h2>
<table class="w3-table-all w3-centered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Moblie</th>
</tr>
<tr>
<td>Ravi Kumar</td>
<td>Yadav</td>
<td>9885847450</td>
</tr>
<tr>
<td>Sunil Kumar</td>
<td>Jain</td>
<td>9415336652</td>
</tr>
<tr>
<td>Ravi Kishan</td>
<td>Singh</td>
<td>6365241484</td>
</tr>
</table>
</div>
</body>
</html>
W3.CSS Tables
- The w3-table-all classes combines all of the table classes.
- The w3-center class is used for centers on the content of a column.
- The w3-right-align classes is used for right aligns the content of a column.
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://nielitbhu.com/w3file.css">
<body>
<div class="w3-container">
<h2>Centering Content in Table</h2>
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Moblie</th>
</tr>
<tr>
<td>Ravi Kumar</td>
<td class="w3-right-align">Yadav</td>
<td class="w3-center">9885847450</td>
</tr>
<tr>
<td>Sunil Kumar</td>
<td class="w3-right-align">Jain</td>
<td class="w3-center">9415336652</td>
</tr>
<tr>
<td>Ravi Kishan</td>
<td class="w3-right-align">Singh</td>
<td class="w3-center">6365241484</td>
</tr>
</table>
</div>
</body>
</html>
W3.CSS Tables
- The w3-table classes is used to display a basic table.
- The w3-striped classes is used to add zebra stripes to any table.
- The w3-bordered classes adds a bottom border to each table row.
- The w3-border classes is used to display a border around a table.
- The w3-table-all classes combines all of the table classes.
- The w3-centered classes is used for centers the content of the table.
- The w3-center class is used for centers on the content of a column.
- The w3-right-align classes is used for right aligns the content of a column.
- The w3-hoverable classes is used to adds a grey background color on mouse-over.
- If you want a custom hover color, add any of the w3-hover-color classes to each <tr> and <td> element:
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://nielitbhu.com/w3file.css">
<body>
<div class="w3-container">
<h2>Hoverable Table</h2>
<table class="w3-table-all w3-hoverable w3-centered">
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Marks</th>
</tr>
</thead>
<tr>
<td>Vikash</td>
<td>Pal</td>
<td>90</td>
</tr>
<tr>
<td>Ravishankar</td>
<td>jain</td>
<td>94</td>
</tr>
<tr>
<td>Manoj</td>
<td>Singh</td>
<td>76</td>
</tr>
</table>
</div>
</body>
</html>