Post
Ask Question

How To Design Table In Apache Cordova App Using Visual Studio

Introduction

Apache Cordova (formerly PhoneGap) is a popular mobile application development framework. Apache Cordova is an open-source mobile development framework. Cordova is a platform, which is used to build mobile apps, using HTML, CSS and JS. We can think of Cordova as a container to connect our Web app with the native mobile functionalities. Web Applications cannot use native mobile functionalities by default. This is where Cordova comes in. It offers a bridge for the connection between the Web app and the mobile device.

Prerequisites
  • Visual Studio 2017 RC
The steps given below are required to be followed in order to how to designing the table in Apache Cordova App, using Visual Studio.

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio or click (Ctrl+Shift+N).

 

Step 2

After opening the New Project, select Installed-->Templates-->JavaScript-->Mobile Apps-->choose the Blank app (Apache Cordova). Now, give your app; a name (Ex:sample) and give the path of your project. Afterwards, click OK.



Step 3

Now, go to Solution Explorer. In Solution Explorer, get all the files and sources in your project.

Subsequently, select Your Project-->www-->double click to open Index.html page. In this, the page is main view of your app. In this page, you can write HTML code.



Step 4

After opening index.html page, you can see the default HTML code. If you want, you can edit HTML code.

Now, you can delete the default HTML code.

 

Step 5

In this step, go to the index.html page. You can write HTML code given below.

Index.html
  1. <body>  
  2.     <table border="1" align="center" width="350">  
  3.         <tr>  
  4.             <th>Sno</th>  
  5.             <th>Name</th>  
  6.             <th>Age</th>  
  7.         </tr>  
  8.         <tr>  
  9.             <td>01</td>  
  10.             <td>Alex</td>  
  11.             <td>20</td>  
  12.         </tr>  
  13.         <tr>  
  14.             <td>02</td>  
  15.             <td>Babu</td>  
  16.             <td>18</td>  
  17.         </tr>  
  18.         <tr>  
  19.             <td>03</td>  
  20.             <td>Clement</td>  
  21.             <td>22</td>  
  22.         </tr>  
  23.         <tr>  
  24.             <td>04</td>  
  25.             <td>Delpin</td>  
  26.             <td>20</td>  
  27.         </tr>  
  28.         <tr>  
  29.             <td>05</td>  
  30.             <td>Sharmi</td>  
  31.             <td>19</td>  
  32.         </tr>  
  33.     </table>  
  34. </body>  


Step 6

In this step, write CSS code in your app. Go to Solution Explorer-->your app-->www-->css--> select index.css file.



Step 7

After opening the index.css file, see the default CSS code. You can write CSS code given below.

Index.css
  1. table {  
  2.     background - color: blueviolet;  
  3.     color: white;  
  4.     border - radius: 10 px;  
  5. }  
  6. table th {  
  7.     background - color: cornflowerblue;  
  8.     color: black;  
  9. }  
  10. table td: hover {  
  11.     background - color: white;  
  12.     color: black;  
  13. }  


Step 8

Now, you can run your app. Choose your platform on configuration manager, which shows the list of platform Android, iOS, Windows-ARM, Windows-x64 and Windows-x86.

If you want to run Windows 10 emulator, choose Windows-x86.

 

Step 9

After choosing the platform, if you choose Windows, it shows the list Windows device, Local Machine and Emulators. If you want to run Windows Emulator, choose Windows 10 Emulator and run your app.



Output

After few seconds, the app will start running on your Emulator. You will see that Apache Cordova app works successfully with the table.



If you want, run Android choose platform and run the Browser.



Summary

Thus, this was the method of how to design the table in Apache Cordova app, using Visual Studio.


Similar Articles