Requirement Description: In this post, I will show you how we can make use of HTML and CSS code to design a page in Oracle APEX.
Sample order is shown below:
Solution: For the solution of the above requirement follow the steps as shown below:
Step 1: Create a blank page with the name as Employee Details
Step 2: Create a Region and set the following properties for that Region.
- Title: Employees Details
- Type: Static Content
- Text:
<table id = "employees">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>ABC</td>
<td>Susanto Paul</td>
<td>India</td>
</tr>
<tr>
<td>ABC</td>
<td>Moumita Deb</td>
<td>India</td>
</tr>
<tr>
<td>XYZ</td>
<td>Lei Chang</td>
<td>Japan</td>
</tr>
<tr>
<td>XTA</td>
<td>Martin</td>
<td>Austria</td>
</tr>
</table>Step 3: Click on Page 5: Employee Details > Set the Inline CSS code as shown below
#employees {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#employees td, #employees th {
border: 1px solid #ddd;
padding: 8px;
}
#employees tr:nth-child(even){background-color: #f2f2f2;}
#employees tr:hover {background-color: #ddd;}
#employees th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #0076df;
color: white;
}Save and run the application. Thus, the ran application is shown as below:
Hence, the solution to our requirement.
If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.
Thanks & Regards,
Susanto Paul
527 total views, 1 views today