How To Create A Responsive Table For Your Website
In this instance if you have a web page in your website which window is large that when view on a smaller window,you can not see all the data represented,that when responsive now comes in.
Let proceed on designing a responsive table,just relax as we move step by step.
Steps To Create A Responsive Table
• Create a CSS file for your table,for the tutorials we are going to create CSS file name style.css ,do not forget when creating a CSS file to add .css extension.Copy and Paste the below code to your editor and name it style.css
table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } th, td { border: none; text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} div { overflow-x:auto; } • Next write the html for your table with the code as shown below,you can modify to suite your own project.
<div> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>First Game</th> <th>Second Game</th> <th>Third Game</th> <th>Fourth Game</th> <th>Fifth Game</th> <th>Sixth Point</th> <th>Seventh Game</th> <th>Eighth Game</th> <th>Nineth Game</th> <th>Total Points</th> </tr> <tr> <td>Bernard</td> <td>Benedict</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>450</td> </tr> <tr> <td>Evelyn</td> <td>Macpherson</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>846</td> </tr> <tr> <td>Benson</td> <td>Benjamin</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>603</td> </tr> </table> </div>
• Here is the complete code for the responsive table as shown below.Copy and paste to your code editor modify to your own taste and save it with anyname.html
<!DOCTYPE html> <html> <head> <title>Responsive Table</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>First Game</th> <th>Second Game</th> <th>Third Game</th> <th>Fourth Game</th> <th>Fifth Game</th> <th>Sixth Point</th> <th>Seventh Game</th> <th>Eighth Game</th> <th>Nineth Game</th> <th>Total Points</th> </tr> <tr> <td>Bernard</td> <td>Benedict</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>450</td> </tr> <tr> <td>Evelyn</td> <td>Macpherson</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>846</td> </tr> <tr> <td>Benson</td> <td>Benjamin</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>603</td> </tr> </table> </div> </body> </html>
I believe this tutorial has been useful to you,please do not forget to share with a friend and also subscribe with us to get the latest updates.
