Introduction
User can apply styles to table elements based on the users requirements By using W3.CSS user can make many changes to the table elements and following are the concepts covered in this chapter.
- W3.CSS Table and Classes
- Different Classes
Description
By using the W3.CSS user can define the tables in order t[ construct the basic table user need to use the w3-table class. By using these users can define the basic table and user can insert the values into the table. The image below demonstrates to construct a basic table as shown.
The code below demonstrates the Basic Table.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Basic Table</h2>
<p>The w3-table class defines a basic table:</p>
<table class="w3-table">
<tr>
<th>Name</th>
<th>Father Name</th>
<th>Points</th>
</tr>
<tr>
<td>Sofia</td>
<td>Jackson</td>
<td>50</td>
</tr>
<tr>
<td>Alexa</td>
<td>Jack</td>
<td>94</td>
</tr>
<tr>
<td>Stella</td>
<td>Jordan</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
W3.CSS Provides some table classes these are some properties of Table those are tabulated below.
| Class | Description |
|---|---|
| w3-table | Which is the container for the HTML element. |
| w3-stripped | Which demonstrates the stripped table. |
| w3-border | Which demonstrates the bordered table. |
| w3-bordered | Which demonstrates the bordered lines. |
| w3-centered | Which demonstrates centered table content. |
| w3-hoverable | Which demonstrates the hoverable table. |
| w3-table-all | Which demonstrates to set the all the properties. |
Description
There are many different classes to style the tables in which some classes are discussed below.
Bordered Table
In order to style the table, User can add some bottom border to each row of the table by using the w3-bordered class The code below demonstrates bordered table as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Striped Table</h2>
<p>The w3-table class defines Stripped table:</p>
<table class="w3-table w3-striped">
<tr>
<th>Name</th>
<th>Father Name</th>
<th>Points</th>
</tr>
<tr>
<td>Sofia</td>
<td>Jackson</td>
<td>50</td>
</tr>
<tr>
<td>Alexa</td>
<td>Jack</td>
<td>94</td>
</tr>
<tr>
<td>Stella</td>
<td>Jordan</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Striped Table
User can also use zebra strips for tables by the w3-stripped class in which user will get table background as zebra strips. The code below demonstrates striped Table as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Bordered Table</h2>
<p>The w3-table class defines a basic table:</p>
<table class="w3-table w3-bordered">
<tr>
<th>Name</th>
<th>Father Name</th>
<th>Points</th>
</tr>
<tr>
<td>Sofia</td>
<td>Jackson</td>
<td>50</td>
</tr>
<tr>
<td>Alexa</td>
<td>Jack</td>
<td>94</td>
</tr>
<tr>
<td>Stella</td>
<td>Jordan</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Displaying it All
User can combine the all the classes by using the w3-table-all class. The code below demonstrates the using of all the classes as shown.
[/html]
W3.CSS
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Centering Content
User can display the table content at the center by using the w3-centered class. The code below demonstrates the Centering Content as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<div class="w3-container">
<h2>Centering Content in Table</h2>
<table class="w3-table-all w3-centered">
<tr>
<th>Name</th>
<th>Father Name</th>
<th>Points</th>
</tr>
<tr>
<td>Sofia</td>
<td>Jackson</td>
<td>50</td>
</tr>
<tr>
<td>Alexa</td>
<td>Jack</td>
<td>94</td>
</tr>
<tr>
<td>Stella</td>
<td>Jordan</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Hover Colors
User can get the hover colors while mouse moves over the table user can give the different colors to the each and every row. The table below demonstrates the Hover colors as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Table With Different Hover Colors</h2>
<p>If you different hover colors, add w3-hover-<em>color</em> classes to each tr element:</p>
<table class="w3-table-all">
<thead>
<tr class="w3-light-grey w3-hover-red">
<th>Name</th>
<th>Father Name</th>
<th>Points</th>
</tr>
</thead>
<tr class="w3-hover-green">
<td>Sofia</td>
<td>Jackson</td>
<td>50</td>
</tr>
<tr class="w3-hover-blue">
<td>Alexa</td>
<td>Jack</td>
<td>94</td>
</tr>
<tr class="w3-hover-black">
<td>Stella</td>
<td>Jordan</td>
<td>67</td>
</tr>
<tr class="w3-hover-text-green">
<td>Bo</td>
<td>Nilson</td>
<td>35</td>
</tr>
</table>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Colored Table
User can also get the required colored table by using the w3-color The code below demonstrates the color table as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>colored Table</h2>
<p>The w3-table class defines a colored table:</p>
<table class="w3-table w3-blue">
<tr>
<th>Name</th>
<th>Father Name</th>
<th>Points</th>
</tr>
<tr>
<td>Sofia</td>
<td>Jackson</td>
<td>50</td>
</tr>
<tr>
<td>Alexa</td>
<td>Jack</td>
<td>94</td>
</tr>
<tr>
<td>Stella</td>
<td>Jordan</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Bordered Table
- Striped Table
- Displaying All
- Centering Content
- Hover Colors
- Colored Table
Table All
The w3-table-all class combines the w3-table, w3-bordered, w3-striped, and w3-border classes:
| Name | Father Name | Points |
|---|---|---|
| Sofia | Jackson | 50 |
| Alexa | Jack | 94 |
| Stella | Jordan | 67 |
Key Points
- User can get the different colors of table by using w3-color.
- User will also get the hover colors to the table.
- User can apply all styles at a time by using w3-table-all.