Table

The table can be used for detailed information and describe the information in categories.

Example

This is how it looks on small screens:

Information Table
Name 1 Job 1 name1@runrantals.com
Name 2 Job 2 name2@runrantals.com
Name 3 Job 3 name3@runrantals.com
Name 4 Job 4 name4@runrantals.com

Code behind Example:
<table id="info"> <caption>Information Table</caption> <tbody> <tr> <th data-label="Name">Name 1</th> <th data-label="Position">Job 1</th> <th data-label="Contact">name1@runrantals.com</th> </tr> <tr> <th scope="row" data-label="Name">Name 2</th> <th data-label="Position">Job 2</th> <th data-label="Contact">name2@runrantals.com</th> </tr> <tr> <th scope="row" data-label="Name">Name 3</th> <th data-label="Position">Job 3</th> <th data-label="Contact">name3@runrantals.com</th> </tr> <tr> <th scope="row" data-label="Name">Name 4</th> <th data-label="Position">Job 4</th> <th data-label="Contact">name4@runrantals.com</th> </tr> </tbody> </table>

Html:

#info { border-collapse: collapse; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 600; } #info th{ border: 1px solid #191b1a; padding: 8px; font-size: 16px; } #info tr:nth-child(even){background-color: #f2f2f2;} #info tr:hover {background-color: #191b1a; color: whitesmoke;} #info { border: 0; } #info caption { font-size: 2rem;} #info tr { display: block; margin-bottom: 12px; } #info th { display: block; text-align: right; } #info th::before { content: attr(data-label); float: left; font-weight: bold; color: #FE9C00; text-transform: uppercase; }

Css:

This is how it looks on DeskTop/Big screens:

Information Table
Name Position Contact
Name 1 Job 1 name@runrantals.com
Name 2 Job 2 name@runrantals.com
Name 3 Job 3 name@runrantals.com
Name 4 Job 4 name@runrantals.com

Code behind Example:
<h3>Information Table</h3> <table id="info"> <tr> <th>Name</th> <th>Position</th> <th>Contact</th> </tr> <tr> <td>Name 1</td> <td>Job 1</td> <td>name@runrantals.com</td> </tr> <tr> <td>Name 2</td> <td>Job 2</td> <td>name@runrantals.com</td> </tr> <tr> <td>Name 3</td> <td>Job 3</td> <td>name@runrantals.com</td> </tr> <tr> <td>Name 4</td> <td>Job 4</td> <td>name@runrantals.com</td> </tr> </table>

Html:

#info { border-collapse: collapse; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 600; } #info td, #info th { border: 1px solid #191b1a; padding: 8px; font-size: 16px; } #info tr:nth-child(even){background-color: #f2f2f2;} #info tr:hover {background-color: #191b1a; color: whitesmoke;} #info th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #FE9C00; color: whitesmoke; }

Css: