W3CSS Tables

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.

Simple W3CSS Tables

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>

Download the code Try the code

Now if you open the above page in browser, you shall see some data displayed in the form of tables.

W3CSS Striped 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>

Download the code Try the code

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

W3CSS Table border and Strips Border

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>

Download the code Try the 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 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>

Download the code Try the code

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.

<<< W3CSS AlertsW3CSS Tables Advanced >>>