Today we are looking at how to create a responsive table for your website.Are you hearing responsive for the first time,responsive is just an approach we employ in website design to make the web page page resizable to the device window.
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
• Next write the html for your table with the code as shown below,you can modify to suite your own project.
• 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
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.
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.
Get our updates delivered to your inbox
No comments:
Post a Comment