W3.CSS Tables:
W3.CSS Tables:
W3.CSS is probably the best framework to stylize a table since there are lots of classes defined here. Many of these classes are multifunctional as to be used for all table tags like- <table>, <tr>, <th>, <td>, etc.
The classes to be used for tables in W3.CSS are as follows-
- w3-table: Container for an HTML table
- w3-striped: Striped table
- w3-border: Bordered table
- w3-bordered: Bordered lines
- w3-centered: Centered table content
- w3-hoverable: Hoverable table
- w3-table-all: All properties set
Except of all these classes, W3.CSS allows many other classes that are generic to many HTML elements. Like: w3-color, w3-right-align, w3-size etc.
Another important class w3-responsive is used with a <div> to make a responsive table
A sample of w3-table and w3-striped classes:
<div class="w3-panel">
<table class="w3-table w3-striped">
<tr>
<th> Name </th>
<th> F Name </th>
<th> M Name </th>
</tr>
<tr>
<td> Suresh </td>
<td> Sunil </td>
<td> Poonam </td>
</tr>
<tr>
<td> Prateek </td>
<td> Devendra </td>
<td> Shivalika </td>
</tr>
<tr>
<td> Kartik </td>
<td> Ravikant </td>
<td> Priyanka </td>
</tr>
</table>
</div>
Output:
A sample of w3-bordered and w3-border classes:
<div class="w3-panel">
<table class="w3-table w3-striped w3-bordered w3-border">
<tr>
<th> Name </th>
<th> F Name </th>
<th> M Name </th>
</tr>
<tr>
<td> Suresh </td>
<td> Sunil </td>
<td> Poonam </td>
</tr>
<tr>
<td> Prateek </td>
<td> Devendra </td>
<td> Shivalika </td>
</tr>
<tr>
<td> Kartik </td>
<td> Ravikant </td>
<td> Priyanka </td>
</tr>
</table>
</div>
Output:
A simple class w3-table-all can apply all the classes discussed so far: w3-table, w3-striped, w3-border and w3-bordered
A tag <thead> before the first <tr> alters the strips. Further w3-color can be used to color the first row:
<div class="w3-panel">
<table class="w3-table-all">
<thead><tr class=“w3-green”>
<th> Name </th>
<th> F Name </th>
<th> M Name </th>
</tr></thead>
<tr>
<td> Suresh </td>
<td> Sunil </td>
<td> Poonam </td>
</tr>
<tr>
<td> Prateek </td>
<td> Devendra </td>
<td> Shivalika </td>
</tr>
<tr>
<td> Kartik </td>
<td> Ravikant </td>
<td> Priyanka </td>
</tr>
</table>
</div>
Output:
A sample of w3-table-all and w3-centered classes:
<div class="w3-panel">
<table class="w3-table-all w3-centered">
<thead><tr class=“w3-green”>
<th> Name </th>
<th> F Name </th>
<th> M Name </th>
</tr></thead>
<tr>
<td> Suresh </td>
<td> Sunil </td>
<td> Poonam </td>
</tr>
<tr>
<td> Prateek </td>
<td> Devendra </td>
<td> Shivalika </td>
</tr>
<tr>
<td> Kartik </td>
<td> Ravikant </td>
<td> Priyanka </td>
</tr>
</table>
</div>
Output:
A sample of w3-hoverable class:
<div class="w3-panel">
<table class="w3-table-all w3-hoverable">
<thead><tr class=“w3-green”>
<th> Name </th>
<th> F Name </th>
<th> M Name </th>
</tr></thead>
<tr>
<td> Suresh </td>
<td> Sunil </td>
<td> Poonam </td>
</tr>
<tr>
<td> Prateek </td>
<td> Devendra </td>
<td> Shivalika </td>
</tr>
<tr>
<td> Kartik </td>
<td> Ravikant </td>
<td> Priyanka </td>
</tr>
</table>
</div>
Output:
A simple class w3-hover-color can be used in different <tr> to make that <tr> colored hoverable. Colours can be used from the list of all supported colors by W3.CSS
A class w3-card-4 can make the table appear as a card:
<div class="w3-panel">
<table class="w3-table-all w3-card-4">
<thead><tr class=“w3-green”>
<th> Name </th>
<th> F Name </th>
<th> M Name </th>
</tr></thead>
<tr>
<td> Suresh </td>
<td> Sunil </td>
<td> Poonam </td>
</tr>
<tr>
<td> Prateek </td>
<td> Devendra </td>
<td> Shivalika </td>
</tr>
<tr>
<td> Kartik </td>
<td> Ravikant </td>
<td> Priyanka </td>
</tr>
</table>
</div>
Output:
A simple class w3-responsive can be used in a <div> before the <table> tag to make the entire table Responsive. Responsive tables are those that are displayed with a horizontal scroll bar on small screens. On large screens, it doesn’t matter at all.
Another simple class w3-size can be used with the <table> tag to make the table appear in different sizes. Like- w3-tiny, w3-small, w3-large etc.