Before the advent of divs, table was the most fundamental layout element. Webpages consisted of hundreds of nested tables. With the advent of divs, the role of tables as the fundamental layout elements subsided. However, tables are still widely in used. Particularly, if you want to display data in tabular form, table is still the key element. Like all the other element, W3CSS also style tables. In this article, we shall see how to use W3CSS tables in our web applications.
To create a simple table, with no affects and striping, simple use w3-table class inside the table tag of the table. Take a look at the following example
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<table class="w3-table">
<tr>
<th>Player</th>
<th>Matches</th>
<th>Goals</th>
</tr>
<tr>
<td>John</td>
<td>50</td>
<td>13</td>
</tr>
<tr>
<td>Mark</td>
<td>34</td>
<td>22</td>
</tr>
<tr>
<td>Will</td>
<td>54</td>
<td>43</td>
</tr>
</table>
</body>
</html>
Now if you open the above page in browser, you shall see some data displayed in the form of tables.
To enhance table aesthetics, you can use w3-striped class along with w3-table class to create a table whose alternate rows have light grey background. Take a look at the following code.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<table class="w3-table w3-striped">
<tr>
<th>Player</th>
<th>Matches</th>
<th>Goals</th>
</tr>
<tr>
<td>John</td>
<td>50</td>
<td>13</td>
</tr>
<tr>
<td>Mark</td>
<td>34</td>
<td>22</td>
</tr>
<tr>
<td>Will</td>
<td>54</td>
<td>43</td>
</tr>
</table>
</body>
</html>
Open the above page in browser, you should see a table where each alternate row has grey background. The header has white background. This greatly improves the visual aesthetic of the table
There are two classes that add border in the W3CSS tables. The first class is w3-border class that adds border around the whole table. The second class is the w3-bordered class. This class adds border around each strip. The example of both of these classes have been given below.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<table class="w3-table w3-striped w3-border">
<tr>
<th>Player</th>
<th>Matches</th>
<th>Goals</th>
</tr>
<tr>
<td>John</td>
<td>50</td>
<td>13</td>
</tr>
<tr>
<td>Mark</td>
<td>34</td>
<td>22</td>
</tr>
<tr>
<td>Will</td>
<td>54</td>
<td>43</td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<table class="w3-table w3-striped w3-bordered">
<tr>
<th>Player</th>
<th>Matches</th>
<th>Goals</th>
</tr>
<tr>
<td>John</td>
<td>50</td>
<td>13</td>
</tr>
<tr>
<td>Mark</td>
<td>34</td>
<td>22</td>
</tr>
<tr>
<td>Will</td>
<td>54</td>
<td>43</td>
</tr>
</table>
</body>
</html>
In this article we started our discussion about W3CSS tables, in the next article we will build up on the knowledge gained in this lecture and will learn some more about W3CSS tables.